Are there any style options for the HTML5 Date picker?

Meet the WebKit pseudo-elements

WebKit offers pseudo-elements for the date input's UI styling:

input[type='date']::-webkit-datetime-edit {
    padding: 5px; // Who doesn't like some personal space?
}

input[type='date']::-webkit-calendar-picker-indicator {
    background: #c1c1c1; // Because mouse clicks deserve to be fab too!
}


These work exclusively on WebKit browsers. The filter property can change the calendar icon's color:

input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(100%); // You go, night mode fans!
}


Making it across platforms

Without standardized CSS-UI for native date pickers, achieving full cross-browser compatibility requires using JavaScript-based date pickers. libraries like Pikaday or Flatpickr are your friends here.

Shine with Styled-components

styled-components provide a way to style date pickers for a modern look and feel:

input[type='date'] {
    -moz-appearance:textfield; // No to dictatorship of spin buttons

    background: transparent; // Because less is more
    
    color: rgba(255, 255, 255, 0.8); // Because ghosts like to pick dates too
    
    ::-webkit-calendar-picker-indicator {
        opacity: 0.7; // I'm not invisible, just shy
    }
}


Be ready for some surprises

Customizing HTML5 date pickers can be tricky because there is no universal, script-free method for styling these elements. Each browser has its own rules, hence ➡️ trial and error is your mate.

CSS properties: the usual suspects

You can use some common CSS properties to tweak the date picker's appearance:

input[type='date'] {
    appearance: none; // Remembering our teenage rebellious phase
    box-sizing: border-box; // Because we love geometry
    padding: 10px; // Who doesn't like some personal space?
}


Remember that browser support can vary.

Keep it visible and usable

Maintain contrast and visibility against page backgrounds and other visual elements. You don't want your date picker to play hide-and-seek using filters. Also, be mindful of functionality over form - make it pretty but usable!