以正确的方式设计 <input type=number/> 微调器箭头答案

【问题标题】：Styling <input type=number/> spinner arrows the right way以正确的方式设计 <input type=number/> 微调器箭头
【发布时间】：2017-03-07 15:17:24
【问题描述】：

<input type="number"/> 在 Mac 中的箭头非常小，在 Chrome 和 Firefox 甚至在 Safari 上都没有用。

在不添加额外箭头图像等的情况下设置样式的正确方法是什么。请注意，我已经看过这些帖子，但它并没有解决问题： Styling a input type=number

MacOS 上该线程的结果如下：

【问题讨论】：

我建议找到一个表单重置 css 来规范化所有浏览器中的元素，因为使用它们的原生样式可能会令人沮丧，并且试图弄清楚如何将它们重置为无样式可能很困难。
这个问题已经被问过很多次了：stackoverflow.com/questions/35273377/style-input-type-number, stackoverflow.com/questions/31478463/…, stackoverflow.com/questions/21266888/…, stackoverflow.com/questions/26159135/styling-html5-number-input
@MikeMcCaughan 尽管这些问题彼此相似，但解决方案似乎并不聪明，而且他们中的许多人只是忽略了主要问题，即使他们中的许多人根本没有解决问题因为他们只是在自己的平台上测试他们的结果。这就是我要求它找到正确方法的方式。
请阅读这些答案。您会发现无法以完全跨浏览器的方式设置微调器的样式。 Stack Overflow 旨在创建一个包含高质量问题和答案的库，而不是一遍又一遍地问同一个问题，以期得到答案。
你还没明白我的目的！我不想在每个平台上都有相同的外观，而是调整 Mac 中的当前外观。以前任何地方都没有提到。请仔细阅读问题，如果你有知识，请回答它，否则不要试图教我我已经知道的东西

【解决方案1】：

最后我找到了让原生箭头变大一点的方法。这是诀窍：

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

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

&lt;input type="number" /&gt;

它在 Chrome 和 Safari 上都运行良好

【讨论】：