只是想删除这些箭头,在某些情况下很方便。
但是,我想保留浏览器对纯数字内容的认识。因此,将其更改input[type="text"]
为不是可接受的解决方案。
现在 Opera 是基于 webkit 的,这个问题是重复的:我可以隐藏 HTML5 数字输入的旋转框吗?
我一直在使用一些简单的 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 元素。如果您对这个想法不熟悉,可以在这里找到一本很好的介绍性读物。
在大多数情况下,Shadow DOM 为我们节省了时间并且很好。但是有些情况,比如这个问题,你想修改它。
您现在可以在 Webkit中使用正确的选择器修改这些,但这仍处于开发的早期阶段。Shadow DOM 本身还没有统一的选择器,因此 webkit 选择器是专有的(而且它不仅仅是附加的问题-webkit
,就像在其他情况下一样)。
正因为如此,Opera 似乎还没有开始添加它。但是,查找有关 Opera Shadow DOM 修改的资源很困难。我发现一些不可靠的互联网资源都说或暗示 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}">
可能就足够了。当然,如何处理它取决于实现。