All geek questions in one place

CSS to design HTML5 date entry calendar in Chrome

Is there a way to create a calendar that appears if you click the down arrow on 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 that there is a pseudo selector 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 a minimum, I only need to work with the latest version of Google Chrome

+6
source share
1 answer

According to Google FAQ, there is currently no way to change the style: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

How to change the appearance of the date picker?

You cannot currently style the appearance of a date picker. In WebKit, we have previously provided ways to manage form forms using the -webkit-CSS appearance or the pseudo-class selector :: - webkit-foo. However, the calendar popup does not provide such methods in WebKit, because it is separate from the document like a popup menu, and there is currently no standard way to control styles on its sub-elements.

It remains to save the rendering of Chrome or use a special library in the input type="text" field to prevent conflicts

0
source

Source: https://habr.com/ru/post/983032/

More articles:


All Articles