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  lt select gt  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

User · Accepted Answer

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:

_x000D_

::-webkit-datetime-edit { padding: 1em; }_x000D_
::-webkit-datetime-edit-fields-wrapper { background: silver; }_x000D_
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }_x000D_
::-webkit-datetime-edit-month-field { color: blue; }_x000D_
::-webkit-datetime-edit-day-field { color: green; }_x000D_
::-webkit-datetime-edit-year-field { color: purple; }_x000D_
::-webkit-inner-spin-button { display: none; }_x000D_
::-webkit-calendar-picker-indicator { background: orange; }

_x000D_

<input type="date">

_x000D_

Screenshot

User · Answer

You can use the following CSS to style the input element    x000D   x000D  input type  date     x000D    background-color  red  x000D    outline  none  x000D    x000D   x000D  input type  date    -webkit-clear-button   x000D    font-size  18px  x000D    height  30px  x000D    position  relative  x000D    x000D   x000D  input type  date    -webkit-inner-spin-button   x000D    height  28px  x000D    x000D   x000D  input type  date    -webkit-calendar-picker-indicator   x000D    font-size  15px  x000D    x000D   lt input type  date  value  From  name  from  placeholder  From  required      gt  x000D   x000D   x000D

User · Answer

found this on Zurb 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

User · Answer

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    x000D   x000D  body   background  black    x000D   x000D  input type  date      x000D    background  transparent  x000D    color  white  x000D    x000D   x000D  input type  date    -webkit-calendar-picker-indicator   x000D    filter  invert 100    x000D    x000D   lt body gt  x000D    lt input type  date    gt  x000D   lt  body gt  x000D   x000D   x000D    Hopefully this helps some people as for the most part chrome even directly says this is impossible

User · Answer

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

User · Answer

I used a combination of the above solutions and some trial and error to come to this solution  Took me an annoying amount of time so I hope this can help someone else in the future  I also noticed that the date picker input is not at all supported by Safari     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

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

Examples related to html

Examples related to datepicker

Examples related to w3c