Are there any style options for the HTML5 Date picker?
HtmlInputDatepickerHtml Problem Overview
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'?
Html Solutions
Solution 1 - Html
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">
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
found this on [Zurb Foundation's GitHub][1]
> 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; > }
[1]: https://github.com/zurb/foundation/issues/1877#issuecomment-15088274 "Zurb Foundation's GitHub"
Solution 5 - Html
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;}
`
Solution 6 - Html
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="" />