如何在Opera浏览器中移除input[type="number"]的箭头

Question

我只是想要去掉这些箭头，在某些情况下很方便。

但我希望保留浏览器对内容仅为数字的意识。因此，将其更改为input[type="text"]不是可接受的解决方案。

---

现在Opera基于webkit，这个问题是重复的：Can I hide the HTML5 number input’s spin box?

- anthonyryan1

---

我认为这是不可能的，标准只允许比较字符串。 - rekire

我知道这是一个老问题，但以防它仍未得到解答，这个链接有帮助吗？http://css-tricks.com/snippets/css/turn-off-number-input-spinners/ - drumwolf

现在，您可以使用<input inputmode="numeric" ... - Suresh Kumar

Answer 1

我一直在使用一些简单的CSS，似乎可以将它们删除并正常工作。

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

<input type="number" step="0.01"/>

这篇CSS Tricks的教程详细地介绍了如何关闭数字输入微调器并展示了如何对它们进行样式设置。

- JayD

---

特别是链接很重要！谢谢 - craphunter

因为并非每个人都使用基于WebKit的浏览器：https://dev59.com/M2Ag5IYBdhLWcg3wo8L2 - Michael Cordingley

不适用于Firefox浏览器（v45.0）。@michael-cordingley评论中的链接可以正常使用。 - Sergey Zhukov

<input type="tel" /> 在许多情况下都能很好地发挥作用。 - khargoosh

即使能够完成工作，使用 type="tel" 实际上是错误的。input 元素的 type 属性有不同的值，可以在这里找到它们。总是使用正确的方法而不是简单的技巧更好。 - Pankaja Gamage

Answer 2

那些箭头是Shadow DOM的一部分，基本上是您页面上隐藏的DOM元素。如果您对此概念不熟悉，可以在这里找到一个很好的介绍性读物can be found here。

在大多数情况下，Shadow DOM可以节省我们的时间并且是好的。但是有些情况，比如这个问题，您想要修改它。

现在使用正确的选择器可以在Webkit中修改它们，但这仍处于开发的早期阶段。Shadow DOM本身尚未统一选择器，因此webkit选择器是专有的（这不仅仅是在其他情况下添加-webkit）。

由此推断，Opera可能还没有添加这个功能。找到关于Opera Shadow DOM修改的资源很困难，我发现的一些不可靠的互联网来源都说或者暗示Opera目前不支持Shadow DOM操作。

我花了一点时间在Opera网站上查找是否有提及它的内容，同时也试图在Dragonfly中找到它们...但是两次搜索都没有结果。由于这个问题没有得到回应，以及Shadow DOM + Shadow DOM manipulation的不断发展，似乎可以得出一个安全的结论：至少目前在Opera中不能这样做。

- jamesplease

Answer 3

没有办法。

这个问题基本上是如何隐藏Google Chrome和Opera中显示的新HTML5微调控件？的一个副本，但也许不是完全重复，因为给出了动机。

如果目的是“浏览器意识到内容纯为数字”，那么您需要考虑这实际上意味着什么。微调器或箭头是使某些情况下数字输入更加舒适的一部分。另一部分是检查内容是否为有效数字，在支持HTML5输入增强功能的浏览器上，您可以使用pattern属性来完成这项工作。该属性还可能影响第三个输入功能，即可能出现的虚拟键盘类型。

例如，如果输入应该恰好是五位数字（在某些国家可能是邮政编号），那么<input type="text" pattern="[0-9]{5}">可能就足够了。当然，它将如何处理取决于具体实现。

- Jukka K. Korpela

---

你可以实现相同的功能并且去除旋转器... - JayD

如果你需要输入大数字，比如金额，那么微调器就完全没用了。同时，你可能需要设置它们的最小值和最大值属性。例如，你要投资多少钱？可能是数千元，但最少5000元，最多20000元。来旋转一下吧，宝贝。 - Puce

@Puce 你可以为微调框添加任意增量步骤。 - machine yearning