Styling options for HTML5 date picker

The date picker in HTML5 basically works very similarly to the JavaScript library, when we focus on the field a calendar pops up and we can then go by month and year Select a date.

So if you want the date input to use more spacing and color scheme you can 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">

The above is the detailed content of Styling options for HTML5 date picker. For more information, please follow other related articles on the PHP Chinese website!