html - Are there any style options for the HTML5 Date picker?

Question

I am really stoked about the HTML5 date picker. It is refreshing to know that the W3C is finally picking up some of the slack so we don't have to keep re-inventing such a common form of input.

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. I'm curious if anyone knows what's going on in W3C land?

This is somewhat paired with another larger question (in case you know the answer): Is it worth my time to try to get involved with the W3C or WHATWG so that some of these things see the light of day? Any sort of insights are helpful.

Answer 1

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

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">