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

只需要删除这些箭头，在某些情况下很方便。如何在Opera中删除输入[type =“number”]中的箭头

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

现在歌剧是基于WebKit，这个问题的dulpicate：Can I hide the HTML5 number input’s spin box?

来源

2012-10-28 anthonyryan1

我觉得这是不可能的标准只是允许字符串compairing。 – rekire

我知道这是一个老问题，但为防万一还没有被回答，这个链接有帮助吗？ HTTP：// CSS-技巧。com/snippets/css/turn-off-number-input-spinners/ – drumwolf

191

我一直在使用一些简单的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; 
}

This tutorial from CSS Tricks explains in detail & also shows how to style them

来源

2014-03-10 17:20:42 JayD

尤其是链接很重要！谢谢 – craphunter

+16

因为不是每个人都使用基于WebKit的浏览器：https://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 –

我想删除递增和递减属性，当点击arows – byteC0de

没有办法。

这个问题基本上是Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?的重复，但可能不是完整的重复，因为动机是给定的。

如果目的是“浏览器意识到内容是纯粹的数字”，那么你需要考虑那是什么意思。箭头或旋钮是在某些情况下使数字输入更舒适的一部分。另一部分是检查内容是否是有效的数字，并且在支持HTML5输入增强功能的浏览器上，您可以使用pattern属性来完成此操作。该属性也可能会影响第三个输入功能，即可能出现的虚拟键盘的类型。

例如，如果输入应该正好是5位数（如某些国家的邮政编号可能是这样），那么<input type="text" pattern="[0-9]{5}">就足够了。它当然是依赖于实现的，它将如何处理。

来源

2012-10-28 07:51:33

你可以实现你想要保留的同样的功能，也可以删除spinners ... – JayD

如果你想输入大数字，spinners是完全没有用的作为金额。同时你可能需要它们的最小和最大属性。例如，你想投资多少？这将是一个数以千计的数量，但它可能有5000和最大20000分钟。旋转，宝贝。 – Puce

这些箭头是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中至少现在不能这样做。

来源

2012-10-28 08:14:14 jmeas

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

回答

相关问题