Are There Any Style Options For the Html5 Date Picker

Are there any style options for the HTML5 Date picker?

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:

::-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; }

<input type="date">

How to customize html5 datepicker

I don't see a way to manipulate the shadow dom elements with normal selectors. You might be able to get away with something hacky:

::-webkit-datetime-edit-text { visibility:hidden;}
::-webkit-datetime-edit-month-field { color: darkgreen; }
::-webkit-datetime-edit-day-field { color: darkgreen; }
::-webkit-datetime-edit-year-field { display: none; }
::-webkit-calendar-picker-indicator { display: none; }

.datepicker-container {
  display: inline;
  position: relative;
  width: 100%;
  height: 7.625rem;
}

.datepicker-input {
  padding-left: 4rem !important;
}

.datepicker-input::before{
  content:'/';
  position: relative;
  left:1.6rem;
  color: darkgreen;
}
.datepicker-input::after{
  content:'▼';
}

<span class="datepicker-container">
  <input type="date"
         class="datepicker-input"
         name="send"
         value="2021-08-31"
  >
</span>

Are There Any Style Options For the Html5 Date Picker

Are there any style options for the HTML5 Date picker?

How to customize html5 datepicker

Related Topics

Leave a reply