只是想移除这些箭头,在某些情况下很方便。
但是,我希望保持浏览器对内容纯粹是数字的认识。因此,将其更改为input[type="text"]
不是一个可接受的解决方案。
既然Opera是基于webkit的,那么这个问题就是:Can I hide the HTML5 number input’s spin box?
发布于 2014-03-11 01:20:43
我一直在使用一些简单的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
发布于 2012-10-28 16:14:15
这些箭头是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...neither搜索中找到它们。由于在这个问题上的沉默,以及Shadow DOM + Shadow DOM操作的发展性质,似乎可以肯定地说,你就是不能在Opera中做到这一点,至少现在是这样。
发布于 2012-10-28 15:51:33
没有办法。
这个问题基本上是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}">
就足够了。当然,这取决于如何处理它。
https://stackoverflow.com/questions/13107118
复制相似问题