HTML5 позиционирование родных элементов управления датой и временем

Question

Если я установил пользовательскую высоту на <input type="date" /> Элемент, родные элементы управления (кнопки вверх и вниз), которые появляются при наведении, выровнены по верху ввода вместо центра.

input {
  height: 40px;
}

<input type="date" />

То же самое происходит с type="time" входы, но не с type="number", Как я могу расположить эти кнопки в центре (по вертикали) ввода?

Answer 1

использование padding вместо height

input {
      padding: 10px 0px 10px 0px;
}

<input type="date" />

С помощью 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" />

Answer 2

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
  height: 40px;
}

<input type="date" />

Море это только сейчас я отредактировал.