Are there any style options for the HTML5 Date picker?
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">
Styling the calendar for html5 native datepicker
I don't think there's any cross-browser way of styling it since every browser implements their own calendar differently. The easiest way (if you can use external libraries) is to just use jQuery UI Datepicker, which without styling will just give you a basic calendar popover that you can then customize the styling/positioning with CSS. Let me know if you need help with that.
You can then use the native html5 datepicker/calendar as a fallback for browsers that have javascript disabled
Change color of Chrome's calendar icon in HTML Date Input
I've managed to work around it for now using a CSS filter to invert the black color to white
::-webkit-calendar-picker-indicator {
filter: invert(1);
}
However this feels quite fragile and far from ideal.
how do I change the position of date picker/ calendar icon in html and CSS without using bootstrap
input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0);
opacity: 1;
display: block;
background: url(/*yourURLHere*/) no-repeat;
width: 25px;
height: 25px;
border-width: thin
}
<input class="input-field date" type="date" placeholder="Date and Time">
Related Topics
Creating Triangles Using Borders
Br Line-Height in Safari and Chrome Leaving Gap
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
How to Create Multiple Columns in a Div
Center Image Vertically and Horizontally Inside of Div with Float:Left
Wrapper Question When Containing Floating Divs
CSS: Show Style on Hover Over Multiple Divs Placed One Over Another
Why Does My Flexbox Sticky Footer Not Work in Safari
CSS3 Onclick Activate Another Div's Animation
Div at Bottom of Window and Adaptable Height Div
Z-Index Not Working on Pseudo-Element
How to Create Border Bottom with 2 Different Color
Two Divs; Left Should Be Fixed Width, Right Should Fill Rest of Space