Question

只是想要移除这些箭头，在某些情况下很方便。

我想保留浏览器对纯数字内容的认识。因此将其更改为input[type="text"]并非可接受的解决方案。

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

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

This tutorial from CSS Tricks explains in detail & also shows how to style them

Answer 2

这些箭头是Shadow DOM的一部分，它们基本上是您网页上隐藏的DOM元素。如果您对这个想法不熟悉，请阅读can be found here。

在大多数情况下，Shadow DOM为我们节省了时间并且很好。但是有一些例子，比如这个问题，你想要修改它。

您现在可以在Webkit中修改这些with the right selectors，但这仍处于开发的早期阶段。 Shadow DOM本身还没有统一的选择器，因此webkit选择器是专有的（并且它不仅仅是附加-webkit的问题，就像在其他情况下一样）。

因此，Opera似乎还没有添加它。但是，查找有关Opera Shadow DOM修改的资源非常困难。一些unreliable internet sources我发现所有人都说或建议Opera目前不支持Shadow DOM操作。

我花了一些时间浏览Opera网站，看看是否有任何提及它，以及试图在Dragonfly中找到它们......搜索都没有运气。由于在这个问题上的沉默，以及Shadow DOM + Shadow DOM操作的开发性质，似乎是一个安全的结论，你不能在Opera中做到这一点，至少目前是这样。

Answer 3

没有办法。

这个问题基本上是Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?的重复，但可能不是完全重复，因为给出了动机。

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

例如，如果输入应该是五位数（如某些国家/地区的邮政编号），那么<input type="text" pattern="[0-9]{5}">就足够了。它当然取决于实现方式。

如何从Opera中的输入[type =“number”]中删除箭头

3 个答案: