如何从输入[类型=“号码”]除去箭头在Opera [重复](How to remove the ar

2019-07-02 19:04发布

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

  • 我可以隐藏HTML5号码输入的微调框? 14个回答

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

我想保留浏览器的内容的意识是纯数字不过。 因此,它改变到input[type="text"]是不是可接受的解决办法。


现在,歌剧是基于WebKit,这个问题的dulpicate: 我可以隐藏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技巧教程详细解释了与还展示了如何他们的风格



Answer 2:

这些箭头是的一部分影子DOM ,这基本上是你的页面上的DOM元素被隐藏你。 如果你是新来的想法,一个很好的入门读可以在这里找到 。

在大多数情况下,影子DOM为我们节省了时间,还是不错的。 但也有情况下,像这样的问题,要修改它。

您可以在现在的Webkit这些修改与正确的选择 ,但是这还处于发展的早期阶段。 影子DOM本身没有统一的选择呢,所以WebKit的选择是专有的(而且它不只是附加的问题-webkit ,就像在其他情况下)。

正因为如此,它很可能是歌剧只是还没有得到解决,以增加这个呢。 查找有关Opera影子DOM修改资源是艰难的,但。 一些不可靠的网络资源 ,我发现所有人都说或暗示歌剧目前不支持影子DOM操作。

我花了一点时间,通过歌剧的网站看看是否有希望成为其中的任何提及,以试图找到他们沿着蜻蜓...无论搜索任何运气。 因为在这个问题上的沉默,和阴影DOM +暗影DOM操作的发展性质的,这似乎是一个安全的结论,你不能这样做在Opera,至少现在是这样。



Answer 3:

没有办法。

这个问题是基本的副本是否有办法隐藏在谷歌浏览器和歌剧显示新的HTML5纺纱器的控制? 但也许不是一个完整的副本,因为动机是给定的。

如果目的是“浏览器的内容是纯数字的意识”,那么你需要考虑什么会真正的意思。 箭头,或微调,都使得数字输入在某些情况下,更舒适的一部分。 另一部分是检查内容是有效号码,并在支持HTML5输入增强的浏览器,你也许可以,使用做pattern属性。 该属性也可能会影响第三输入功能,可能出现的虚拟键盘的即类型。

例如,如果输入应该是完全五位数(如邮政号码可能,在某些国家),然后<input type="text" pattern="[0-9]{5}">可能是足够的。 当然,实现依赖将如何处理。



文章来源: How to remove the arrows from input[type=“number”] in Opera [duplicate]