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">

mkotla

e

Updated on: 02-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started