How to style the HTML5 Date picker with CSS?

Spread the love

Sometimes, we want to style the HTML5 Date picker with CSS.

In this article, we’ll look at how to style the HTML5 Date picker with CSS.

How to style the HTML5 Date picker with CSS?

To style the HTML5 Date picker with CSS, we can use a few pseudoselectors.

For instance, we write

<input type="date" />

to add a date picker.

Then we write

::-webkit-datetime-edit {
  padding: 1em;
}
::-webkit-datetime-edit-fields-wrapper {
  background: silver;
}
::-webkit-datetime-edit-text {
  color: red;
  padding: 0 0.3em;
}
::-webkit-datetime-edit-month-field {
  color: blue;
}
::-webkit-datetime-edit-day-field {
  color: green;
}
::-webkit-datetime-edit-year-field {
  color: purple;
}
::-webkit-inner-spin-button {
  display: none;
}
::-webkit-calendar-picker-indicator {
  background: orange;
}

to style the parts of the date input indicated after the prefix.

Conclusion

To style the HTML5 Date picker with CSS, we can use a few pseudoselectors.

Leave a Reply

Your email address will not be published. Required fields are marked *