用正确的方式设置<input type =“number /”/>微调器箭头

时间:2017-03-07 15:17:24

标签: html css forms

Mac中<input type="number"/>的箭头非常小,即使在Safari上也无法在Chrome和Firefox上使用。

在没有添加额外箭头图像等的情况下对它们进行样式设置的正确方法是什么。请注意,我已经看过这些线程并且它没有解决问题: Styling a input type=number

这个线程的出现是:

LcSalazar enter image description here

1 个答案:

答案 0 :(得分:6)

最后,我找到了使原生箭头更大的方法。这是诀窍:

input[type=number] {
  line-height: 27px;
}

input[type=number]::-webkit-inner-spin-button {
  width: 30px;
  height: 30px;
}
<input type="number" />

它在Chrome和Safari上都运行良好