Question

我之前在Can I hide the HTML5 number input’s spin box?看过这个问题，其他一些人已经询问了浏览器的具体请求，在我的情况下我想知道的是：有没有办法创建一个CSS像.no-spin这样的类可以隐藏浏览器中的旋转箭头吗？

我试过了：

.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;
    -moz-appearance:textfield !important;
}

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

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;
}

Answer 3

隐藏输入数字的箭头

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 */
    }

使用css类隐藏HTML5输入类型编号箭头？

3 个答案:

答案