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

Question

如果我将自定义高度设置为 <input type="date" />元素，则将悬停在悬停在悬停在输入顶部而不是中心的盘旋上的本机控件（向上和向下按钮）。p>

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此刚刚编辑。