使用 css 类隐藏 HTML5 输入类型数字箭头？

Question

我以前在这里看到过这个问题 我可以隐藏 HTML5 数字输入的旋转框吗？ ，还有一些人询问了对浏览器的特定请求，在我的情况下，我想知道的是：有没有办法创建一个像 .no-spin 这样的 css 类来隐藏浏览器中的旋转箭头？

我试过：

 .no-spin {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

但不走运，事实上我对css并不是很了解……

原文由 Jonathan Solorzano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

回答

 .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance:textfield !important;
}

 <input type="number" class="no-spin"/>

编辑： 从 2020 年起，将“ -moz-appearance ”声明放在“ .no-spin::-webkit ”选择器中将无法在 Firefox 中运行。要使其在所有浏览器中运行，“-moz-appearance”声明必须放在一个新的类选择器中，它本身就是“.no-spin”。

w3schools 参考： https ://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

原文由 Abs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以在你的html中尝试

<input type="text" pattern="[0-9]">

或者如果你真的想把它保留为数字，尽管因为安全性不会改变任何东西，可以在你的 css 中尝试这个：

 .no-spin, .no-spin:hover, no-spin:focus {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

原文由 Cr1xus 发布，翻译遵循 CC BY-SA 3.0 许可协议