Syntax error Style options for the HTML5 Date picker

Style options for the HTML5 Date picker

The date picker in HTML5 basically works very similar to how the JavaScript Libraries did, when we focus on the field a calendar will pop out, and then we can navigate through the months and years to select the date.

Therefore, if you want the date input to use more spacing and a color scheme you could add the following to your code.

::-webkit-datetime-edit { padding: 2 em; }
::-webkit-datetime-edit-fields-wrapper { background:green; }
::-webkit-datetime-edit-text { color: blue; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: red; }
::-webkit-datetime-edit-day-field { color: orange; }
::-webkit-datetime-edit-year-field { color: red; }
<input type = "date">
Updated on: 2020-06-02T09:20:33+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements