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

Haven't tried it out due to the lack of support it had but I am guessing styling is minimal going by the ` — James Coyle, Feb 18 '13 at 22:12
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. — lepe, Aug 17 '15 at 08:08
In order to check more pseudo elements in future - https://stackoverflow.com/questions/26852922/inspect-webkit-input-placeholder-with-developer-tools/26853319#26853319 — Germa Vinsmoke, Jan 05 '21 at 09:02

Anselm · Accepted Answer · 2016-09-26T15:39:07.587

302

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

Screenshot

edited Sep 26 '16 at 15:39

answered Apr 19 '13 at 14:17

Anselm

7,450
3
28
37

3

using input[type="date"] worked for my purposes and maybe that will work for someone else too. – Elon Zito Nov 18 '15 at 01:34
2

Note that you can style the clear button too with the pseudo-class `::-webkit-clear-button` – Gabriel Duarte Jul 25 '17 at 20:01
10

A source for these pseudo-classes would make this an even better answer... – Heretic Monkey Jul 20 '20 at 20:03
You need to write `input::...` for each entry – DarkTrick Aug 30 '22 at 05:04

score 32 · Answer 2 · answered Feb 18 '13 at 23:11

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.

score 19 · Answer 3 · answered Jun 04 '20 at 02:29

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.

score 15 · Answer 4 · edited Mar 04 '22 at 19:05

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;
}

score 8 · Answer 5 · edited Mar 04 '22 at 19:06

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;}
`

score 3 · Answer 6 · edited Aug 28 '18 at 01:32

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

Are there any style options for the HTML5 Date picker?

6 Answers6

Linked

Related