Are there any style options for the HTML5 Date picker?
datepicker, html, input
Solution
The following pseudo-elements are made available by WebKit for customizing a `date`, `datetime-local`, `month`, `week`, or `time` input’s textbox:
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-year-field
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-week-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-hour-field
::-webkit-datetime-edit-minute-field
::-webkit-datetime-edit-second-field
::-webkit-datetime-edit-millisecond-field
::-webkit-datetime-edit-ampm-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
I found these attribute names in Chromium’s default “user agent” stylesheet.
Note that some subset of the `edit-...-field` pseudo elements are included depending on the type of input, the `step` attribute on the input, and the user’s locale.
So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
<input type="date">
Problem
I am really stoked about the HTML5 date picker. The caveat is that I don't see or foresee much in the way of applying colors to the picker itself which is going to make the use of the datepicker kind of a deal-breaker on most sites. The `<select>` suffers from widespread JavaScript-replacement hacks for the simple reason that people can't make it pretty. So are there any known styling options for the HTML input of `type='date'`?