CSS for styling HTML5 date input calendar in Chrome
According to Google's FAQ, there is no way to modify the style at this time: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome
How do I change the appearance of the date picker?
You cannot currently style the appearance of the date picker. In WebKit, we have previously provided ways to style form controls with the -webkit-appearance CSS property or the ::-webkit-foo pseudo class selector. However the calendar popup does not provide such ways in WebKit because it is separate from the document, like a popup menu for , and there is not currently a standard for how to control styling on its sub-elements.
You are left with keeping with Chrome's rendering, or using a custom library over an input type="text"
field to prevent conflicts
meatFeed
Updated on June 14, 2022Comments
-
meatFeed almost 2 years
Is there a way to style the calendar that pops up if you click the down arrow on a html5 date input?
<form> <label for="f-duedate">Due date</label> <input id="f-duedate" type="date" name="duedate" data-date-format="dd.mm.YYYY"> </form>
http://jsfiddle.net/no8a17eo/1/
I know there are pseudo selectors for styling the input field itself:
::-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 { display: none; } ::-webkit-calendar-picker-indicator:hover { background:none; }
At the bare minimum I only need it to work on the latest version of Google Chrome