Are there any styling options for the HTML5 date picker?

Date picker in HTML5 displays a calendar-like popup. This is the same as selecting the month and year and adding the date.

Example

You can also customize the popup and add a background color. You can try running the following code to add style options to HTML date picker -

::-webkit-datetime-edit { padding: 4 em; }
::-webkit-datetime-edit-fields-wrapper { background:blue; }
::-webkit-datetime-edit-text { padding: 0 0.5em; }

Here is editing the month, day and year fields -

::-webkit-datetime-edit-month-field { color: white; }
::-webkit-datetime-edit-day-field { color: red; }
::-webkit-datetime-edit-year-field { color: red; }
::-webkit-calendar-picker-indicator { background:gray; }

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