htmlinputdatepicker

Are there any style options for the HTML5 Date picker?

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'?

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

    Screenshot