Are there any style options for the HTML5 Date picker?

Question

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

Amandaamandi

Haven't tried it out due to the lack of support it had but I am guessing styling is minimal going by the <select> input. – Tinworks

I have to say that things advance very slowly in the W3C world. Browsers devs/companies will prefer to move to where there is interest. They (browsers) will be reluctant to implement things that are not well specified in W3C (and cooking those docs take time). More the people faster the things can be achieved. So, yes, if you have interest, join their mailing list and start get involved. – Blameful

In order to check more pseudo elements in future - #26853422 – Rattletrap

Answer 1

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

Carboniferous

using input[type="date"] worked for my purposes and maybe that will work for someone else too. – Kedah

Note that you can style the clear button too with the pseudo-class ::-webkit-clear-button – Susceptive

A source for these pseudo-classes would make this an even better answer... – Sylviesylvite

You need to write input::... for each entry – Concur

@HereticMonkey you can find a pretty good list in Chrome’s default stylesheet: github.com/chromium/chromium/blob/… – Martinamartindale

@LukeTaylor That link would look better in the answer itself, rather than as an easily lost comment... – Sylviesylvite

Answer 2

Currently, there is no cross browser, script-free way of styling a native date picker.

As for what's going on inside WHATWG/W3C... If this functionality does emerge, it will likely be under the CSS-UI standard or some Shadow DOM-related standard. The CSS4-UI wiki page lists a few appearance-related things that were dropped from CSS3-UI, but to be honest, there doesn't seem to be a great deal of interest in the CSS-UI module.

I think your best bet for cross browser development right now, is to implement pretty controls with JavaScript based interface, and then disable the HTML5 native UI and replace it. I think in the future, maybe there will be better native control styling, but perhaps more likely will be the ability to swap out a native control for your own Shadow DOM "widget".

It is annoying that this isn't available, and petitioning for standard support is always worthwhile. Though it does seem like jQuery UI's lead has tried and was unsuccessful.

While this is all very discouraging, it's also worth considering the advantages of the HTML5 date picker, and also why custom styles are difficult and perhaps should be avoided. On some platforms, the datepicker looks extremely different and I personally can't think of any generic way of styling the native datepicker.

Perpetrate

Answer 3

FYI, I needed to update the color of the calendar icon which didn't seem possible with properties like color, fill, etc.

I did eventually figure out that some filter properties will adjust the icon so while i did not end up figuring out how to make it any color, luckily all I needed was to make it so the icon was visible on a dark background so I was able to do the following:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

Hopefully this helps some people as for the most part chrome even directly says this is impossible.

Gone

These days I believe color-scheme: dark is the recommended way to accomplish the same behavior (less “hacky” than using filters) https://mcmap.net/q/136275/-are-there-any-style-options-for-the-html5-date-picker – Martinamartindale

Yes, this was quite awhile ago now :-). -- still wish there were more options though! – Gone

Answer 4

found this on Zurb Foundation's GitHub

In case you want to do some more custom styling. Here's all the default CSS for webkit rendering of the date components.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Paderna

Answer 5

I used a combination of the above solutions and some trial and error to come to this solution.

I am using styled-components to render a transparent date picker input as shown in the image below:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Mansoor

Answer 6

You can use the following CSS to style the input element.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

Cocci

Answer 7

Setting color-scheme: dark on a date or datetime-local input will also make the calendar icon light-colored in Chrome, without having to use CSS filters as a workaround.

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
  border: none;

  color-scheme: dark;
}

<body>
 <input type="date" />
</body>

Martinamartindale