我有一个主要面向移动用户的网站，但也适用于桌面用户。
在 Mobile Safari 上，使用 <input type="number"> 效果很好，因为它会在只包含数字的输入字段上显示数字键盘。
然而，在 Chrome 和 Safari 中，使用数字输入会在字段右侧显示旋转按钮，这在我的设计中看起来很垃圾。我真的不需要这些按钮，因为无论如何当你需要写一个像 6 位数字这样的东西时，它们是无用的。
是否可以使用 -webkit-appearance 或其他一些 CSS 技巧来禁用它？我试过没有太多运气。
type="text" 并且只切换到数字键盘功能，您可以使用 pattern="[0-9]*" 获取键盘功能，让您保留 type="text"。请参阅stackoverflow.com/questions/6171903/…
我发现这个答案还有第二部分。
The first portion 帮助了我，但我的 type=number 输入右侧仍有空间。我已将输入的边距归零，但显然我也必须将微调器的边距归零。
这修复了它：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
下面的 CSS 适用于 Chrome 和 Firefox
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
不确定这是否是最好的方法，但这会使微调器在 Chrome 8.0.552.5 dev 上消失：
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
-webkit-outer-spin-button。
阻止微调器出现在 Opera 中似乎是不可能的。作为临时解决方法，您可以为微调器腾出空间。据我所知，以下 CSS 仅在 Opera 中添加了足够的填充：
noindex:-o-prefocus,
input[type=number] {
padding-right: 1.2em;
}
通过更改来避免 number type 的浏览器默认微调器的另一种解决方案
输入文本输入模式输入数字和仅数字模式“[0-9]*”
<input type="text" inputmode="numeric" pattern="[0-9]*" />
与“数字”类型不同，上述方案仍然允许用户在输入框中输入非数字字符，但您可以通过监听 oninvalid 事件来避免无效提交。
您还可以使用以下技巧隐藏微调器：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity:0;
pointer-events:none;
}
关注公众号
不定期副业成功案例分享
min=0.01（和max为任意值），但我更希望滚轮在页面上上下移动。我正在使用 AngularJS，但我找不到任何自动取款机。