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

Question

我以前在这里看到过这个问题 Can I hide the HTML5 number input’s spin box? ，还有一些人提出了对浏览器的特定请求，在我的例子中，我想知道的是:有没有办法创建一个像 .no-spin 这样的 css 类来隐藏旋转箭头跨浏览器？

我试过:

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

但不幸的是，事实上我对 css 并不是很了解......

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"/>

编辑:将“-moz-appearance”声明放在“.no-spin::-webkit”选择器中不会从 2020 年开始在 Firefox 中工作。为了让它在所有浏览器中工作，“-moz-appearance”声明必须放在一个新的类选择器中，它本身就是“.no-spin”。

w3schools 引用:https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp