将 <input type=number/> 的旋转箭头样式正确应用

Question

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

如何在不添加额外箭头图像的情况下对它们进行样式设计。请注意，我已经看过以下讨论但这并没有解决问题: 设置input type=number的样式

在 MacOS 上，该主题的结果如下:

- Amin Memariani

---

我建议找到一个表单重置 CSS，它可以在所有浏览器中规范化元素，因为使用原生样式可能很令人沮丧，并且尝试将其重置回无样式可能会很困难。 - Waxi

这个问题已经被问了很多很多次：http://stackoverflow.com/questions/35273377/style-input-type-number，http://stackoverflow.com/questions/31478463/change-the-appearance-of-input-type-number，https://dev59.com/WWEi5IYBdhLWcg3wd8AF，http://stackoverflow.com/questions/26159135/styling-html5-number-input。 - Heretic Monkey

@MikeMcCaughan 尽管这些问题相似，但解决方案似乎并不聪明，许多人只是忽略了主要问题，甚至很多人根本没有解决问题，因为他们只在自己的平台上测试结果。这就是我提出这个问题的原因，希望找到正确的方法。 - Amin Memariani

请阅读这些答案。你会发现没有一种完全跨浏览器的方式来为旋转器添加样式。Stack Overflow 旨在创建高质量问题和答案的库，而不是希望得到相同问题的重复提问以期获得答案。 - Heretic Monkey

你还没有理解我的意图！我不想在每个平台上都拥有相同的外观，而是要调整Mac上的当前外观。这在以前的任何地方都没有提到过。请仔细阅读问题，如果您知道答案，请回答，否则不要试图教我我已经知道的东西。 - Amin Memariani

Answer 1

最后我找到了一种方法，可以让本地箭头变大一点。 这是诀窍：

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

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

<input type="number" />

它在Chrome和Safari上都表现良好

- Amin Memariani

---

这在Windows的Chrome上也非常好用。在Windows的Firefox中，它只是显示为没有任何样式的文本。 - ssc-hrep3

Firefox for Mac同样适用。 - Jas