Style options for the HTML5 Date picker

HTMLWeb DevelopmentFront End Technology

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">
raja
Mkotla
Published on 21-Mar-2018 09:38:29
Previous Page Print Page
Next Page  
Advertisements