使用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...

- Jonathan Solorzano

---

现在你可以使用<input inputmode="numeric" ..。参考：https://youtu.be/alGcULGtiv8?t=630 - Suresh Kumar

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年的情况，在Firefox浏览器中，将*-moz-appearance*声明放在*.no-spin::-webkit*选择器内部将不起作用。为了使其在所有浏览器中起作用，*-moz-appearance*声明必须放在一个新的类选择器中，即只有*.no-spin*本身。

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

- Abs

---

这个解决方案在大多数浏览器和设备上都支持吗？ - Jonathan Solorzano

它应该基于!important在Safari上运行，而在Chrome和Firefox上则是其余部分。欢迎社区提出我可能遗漏的任何改进建议。 - Abs

这个方法对我在 Chrome 里起作用，然而需要注意的是，上下箭头仍会导致数字增加或减少。 - Aaron Cicali

-moz-appearance:textfield !important; 需要应用于输入框本身，而不是旋转按钮。更改这个将使其在FF中工作。 - theMaestro73

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

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

- ASC User

Answer 4

在所有浏览器中都可以正常工作：

HTML

<input type="number" />

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}

- a.ak