Html 如何从 Opera 中的 input[type="number"] 中删除箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13107118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the arrows from input[type="number"] in Opera
提问by anthonyryan1
Just looking to remove these arrows, convenient in certain situations.
只是想删除这些箭头，在某些情况下很方便。
I would like to preserve the browser's awareness of the content being purely numeric however. So changing it to input[type="text"]is not an acceptable solution.
但是，我想保留浏览器对纯数字内容的认识。因此将其更改input[type="text"]为不是一个可接受的解决方案。
Now that Opera is webkit based, this question is a dulpicate of: Can I hide the HTML5 number input's spin box?
现在 Opera 是基于 webkit 的，这个问题是重复的：我可以隐藏 HTML5 数字输入的旋转框吗？
回答by JayD
I've been using some simple CSS and it seems to remove them and work fine.
我一直在使用一些简单的 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
回答by jamesplease
Those arrows are part of the Shadow DOM, which are basically DOM elements on your page which are hidden from you. If you're new to the idea, a good introductory read can be found here.
这些箭头是Shadow DOM 的一部分，它们基本上是页面上对您隐藏的 DOM 元素。如果您不熟悉这个想法，可以在此处找到一本很好的介绍性读物。
For the most part, the Shadow DOM saves us time and is good. But there are instances, like this question, where you want to modify it.
在大多数情况下，Shadow DOM 为我们节省了时间并且很好。但是在某些情况下，例如这个问题，您想要修改它。
You can modify these in Webkit now with the right selectors, but this is still in the early stages of development. The Shadow DOM itself has no unified selectors yet, so the webkit selectors are proprietary (and it isn't just a matter of appending -webkit, like in other cases).
您现在可以使用正确的选择器在 Webkit 中修改这些，但这仍处于开发的早期阶段。Shadow DOM 本身还没有统一的选择器，所以 webkit 选择器是专有的（这不仅仅是附加的问题-webkit，就像在其他情况下一样）。
Because of this, it seems likely that Opera just hasn't gotten around to adding this yet. Finding resources about Opera Shadow DOM modifications is tough, though. A few unreliable internet sourcesI've found all say or suggest that Opera doesn't currently support Shadow DOM manipulation.
因此，Opera 似乎还没有开始添加它。但是，查找有关 Opera Shadow DOM 修改的资源很困难。我发现的一些不可靠的互联网资源都说或暗示 Opera 目前不支持 Shadow DOM 操作。
I spent a bit of time looking through the Opera website to see if there'd be any mention of it, along with trying to find them in Dragonfly...neither search had any luck. Because of the silence on this issue, and the developing nature of the Shadow DOM + Shadow DOM manipulation, it seems to be a safe conclusion that you just can't do it in Opera, at least for now.
我花了一些时间浏览 Opera 网站，看看是否有任何提及它，并试图在 Dragonfly 中找到它们……搜索都没有运气。由于对这个问题的沉默，以及 Shadow DOM + Shadow DOM 操作的开发性质，似乎可以得出一个安全的结论，即您不能在 Opera 中执行此操作，至少目前是这样。
回答by Jukka K. Korpela
There is no way.
不可能。
This question is basically a duplicate of Is there a way to hide the new HTML5 spinbox controls shown in Google Chrome & Opera?but maybe not a full duplicate, since the motivation is given.
这个问题基本上是有没有办法隐藏 Google Chrome 和 Opera 中显示的新 HTML5 旋转框控件的重复？但也许不是一个完整的副本，因为给出了动机。
If the purpose is “browser's awareness of the content being purely numeric”, then you need to consider what that would really mean. The arrows, or spinners, are part of making numeric input more comfortable in some cases. Another part is checking that the content is a valid number, and on browsers that support HTML5 input enhancements, you might be able to do that using the patternattribute. That attribute may also affect a third input feature, namely the type of virtual keyboard that may appear.
如果目的是“浏览器对纯数字内容的感知”，那么您需要考虑这真正意味着什么。在某些情况下，箭头或微调器是使数字输入更舒适的一部分。另一部分是检查内容是否为有效数字，并且在支持 HTML5 输入增强的浏览器上，您可以使用该pattern属性来执行此操作。该属性也可能影响第三个输入特征，即可能出现的虚拟键盘的类型。
For example, if the input should be exactly five digits (like postal numbers might be, in some countries), then <input type="text" pattern="[0-9]{5}">could be adequate. It is of course implementation-dependent how it will be handled.
例如，如果输入应该正好是五位数字（就像在某些国家/地区可能是邮政号码一样），那么<input type="text" pattern="[0-9]{5}">就足够了。当然，它的处理方式取决于实现。
