我之前在Can I hide the HTML5 number input’s spin box?看过这个问题,其他一些人已经询问了浏览器的具体请求,在我的情况下我想知道的是:有没有办法创建一个CSS像.no-spin
这样的类可以隐藏浏览器中的旋转箭头吗?
我试过了:
.no-spin {
-webkit-appearance: none;
margin: 0;
-moz-appearance:textfield;
}
但是没有运气,事实上我对css的了解并不多......
答案 0 :(得分:22)
.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
-moz-appearance:textfield !important;
}
<input type="number" class="no-spin"/>
答案 1 :(得分:3)
你可以在你的HTML中试试
<input type="text" pattern="[0-9]">
或者如果你真的想把它保留为数字,虽然安全性不会改变任何东西,但也可以试试你的css:
.no-spin, .no-spin:hover, no-spin:focus {
-webkit-appearance: none;
margin: 0;
-moz-appearance:textfield;
}
答案 2 :(得分:0)
隐藏输入数字的箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type="number"] {
-moz-appearance: textfield; /* Firefox */
}