首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Opera中删除输入[type=“number”]中的箭头

如何在Opera中删除输入[type=“number”]中的箭头
EN

Stack Overflow用户
提问于 2012-10-28 15:29:58
回答 3查看 275.8K关注 0票数 135

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

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

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 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

票数 330
EN

Stack Overflow用户

发布于 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中做到这一点,至少现在是这样。

票数 14
EN

Stack Overflow用户

发布于 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}">就足够了。当然,这取决于如何处理它。

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13107118

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档