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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从Opera中删除输入[type =“number”]中的箭头[复制]相关的知识,希望对你有一定的参考价值。

这个问题在这里已有答案:

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

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


既然Opera是基于webkit的,那么这个问题就是一个副本:Can I hide the HTML5 number input’s spin box?

答案

我一直在使用一些简单的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"/>
另一答案

这些箭头是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中做到这一点,至少目前如此。

另一答案

没有办法。

这个问题基本上是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”]中的箭头[复制]的主要内容,如果未能解决你的问题,请参考以下文章

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

从输入 type=number 中删除前导零

如何使用 lodash 从列表中删除元素?

如何在 chrome、safari、opera 等 webkit 浏览器中删除 c fakepath?

从 Firefox 中的范围输入元素中删除虚线轮廓

如何从输入按钮中删除轮廓边框