Search code examples
htmlcsshtml-input

How can I center the HTML date & time inputs' native controls?

If I set the custom height to an <input type="date" /> element, the native controls (up and down buttons) which appear on hover are aligned to the top of the input instead of the center.

input {
  height: 40px;
}
<input type="date" />

The same happens with type="time" inputs but not with type="number". How can I position these buttons to the center (vertically) of the input?

Solution

  • Use padding instead height

    input {
      padding: 10px 0px 10px 0px;
}
    <input type="date" />

    Using height 

    input {
  height: 40px;
}
input[type=date]::-webkit-inner-spin-button {
margin-top: 10px!important;
}



input[type=date]::-webkit-calendar-picker-indicator {
margin-top: 10px!important;
}
    <input type="date" />