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

Question

只是想要删除这些箭头,在某些情况下方便.

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

---

现在Opera是基于webkit的,这个问题是一个愚蠢的说法:我可以隐藏HTML5数字输入的旋转框吗？

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的这个教程详细解释了它,并且还展示了如何设置它们的样式

Answer 2

这些箭头是Shadow DOM的一部分,它们基本上是你网页上隐藏的DOM元素.如果您对这个想法不熟悉,可以在这里找到一个很好的介绍性阅读材料.

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

您现在可以使用正确的选择器在Webkit中修改这些,但这仍处于开发的早期阶段.Shadow DOM本身还没有统一的选择器,因此webkit选择器是专有的(并且它不仅仅是附加的问题-webkit,就像在其他情况下一样).

因此,Opera似乎还没有添加它.但是,查找有关Opera Shadow DOM修改的资源非常困难.一些不可靠的互联网资源我发现所有人都说或建议Opera目前不支持Shadow DOM操作.

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

Answer 3

没有办法.

这个问题基本上是重复的有没有办法隐藏谷歌Chrome和Opera中显示的新HTML5旋转框控件？但也许不是完全重复,因为给出了动机.

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

例如,如果输入应该是五位数(如某些国家的邮政编号),那么<input type="text" pattern="[0-9]{5}">就足够了.它当然取决于实现如何处理.