9

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>

a html5 calendar

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

icedwater
  • 4,701
  • 3
  • 35
  • 50
meatFeed
  • 124
  • 1
  • 1
  • 3
  • Duplicated I think, checkout this answer: http://stackoverflow.com/a/16106788/2104879 – mertyildiran Feb 26 '15 at 09:03
  • 3
    No, I'm not asking about the input field, I need a way to style the calendar. Also, I do not require a Cross Browser solution. – meatFeed Feb 26 '15 at 09:09
  • @meatFeed I know your pain, dumb-dumbs who think the color red is a duplicate of the color blue; the reputation system on Stack is explicitely *not* correlated to *competence*! – John Mar 23 '19 at 01:13

1 Answers1

4

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

Jako
  • 944
  • 14
  • 33
  • 1
    Side note: the article was written in 2012, which is why it references WebKit. Chrome's current engine (Blink) was released in 2013. – Alex Sep 28 '22 at 19:43