如何使 HTML 日期和时间输入的本机控件居中？

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" />

Sea 刚刚编辑的这个

如何使 HTML 日期和时间输入的本机控件居中？

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

html

css

html-input