136

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

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

现在 Opera 是基于 webkit 的，这个问题是重复的：我可以隐藏 HTML5 数字输入的旋转框吗？

4

3 回答 3

335

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

本教程来自 CSS Tricks 详细解释并展示了如何设置它们的样式

于 2014-03-10T17:20:42.963 回答
15

这些箭头是Shadow DOM的一部分，它们基本上是页面上隐藏的 DOM 元素。如果您对这个想法不熟悉，可以在这里找到一本很好的介绍性读物。

在大多数情况下，Shadow DOM 为我们节省了时间并且很好。但是有些情况，比如这个问题，你想修改它。

您现在可以在 Webkit中使用正确的选择器修改这些，但这仍处于开发的早期阶段。Shadow DOM 本身还没有统一的选择器，因此 webkit 选择器是专有的（而且它不仅仅是附加的问题-webkit，就像在其他情况下一样）。

正因为如此，Opera 似乎还没有开始添加它。但是，查找有关 Opera Shadow DOM 修改的资源很困难。我发现一些不可靠的互联网资源都说或暗示 Opera 目前不支持 Shadow DOM 操作。

我花了一些时间浏览 Opera 网站，看看是否有人提到它，并试图在 Dragonfly 中找到它们……搜索都没有运气。由于在这个问题上的沉默，以及Shadow DOM + Shadow DOM 操作的发展性质，似乎可以肯定的结论是你不能在Opera 中做到这一点，至少目前是这样。

于 2012-10-28T08:14:14.717 回答
11

没有办法。

这个问题基本上是重复的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}">可能就足够了。当然，如何处理它取决于实现。

于 2012-10-28T07:51:33.113 回答