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

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

然而，我希望保持浏览器对内容纯数字化的意识。因此，将其改为 input[type="text"]是不可接受的解决方案。

既然 Opera 是基于 webkit 的，那么这个问题就是: 我可以隐藏 HTML5数字输入的旋转框？的副本

304857 次浏览
小开

不可能。

这个问题基本上是 有没有办法隐藏显示在 Google Chrome & Opera 中的新 HTML5 spinbox 控件？的副本，但可能不是完全的副本，因为动机已经给出。

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

例如，如果输入应该正好是五位数字(就像某些国家的邮政编号一样) ，那么 <input type="text" pattern="[0-9]{5}">就足够了。当然，它的处理方式取决于实现。

小开

这些箭头是 暗影 DOM的一部分，暗影 DOM基本上是页面上隐藏的 DOM 元素。如果你是新的想法，一个很好的入门阅读 可以在这里找到。

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

您现在可以在 Webkit 中修改这些 选择正确的选择器，但是这仍然处于开发的早期阶段。Shadow DOM 本身还没有统一的选择器，所以 webkit 选择器是专有的(并不像其他情况下那样只是附加 -webkit)。

正因为如此，Opera 似乎还没有开始添加这个功能。不过，要找到关于 Opera Shadow DOM 修改的资源是很困难的。我发现一些 不可靠的网络资源都表明或暗示 Opera 目前不支持 Shadow DOM 操作。

我花了一点时间浏览 Opera 网站，看看是否有任何提到它，同时试图在蜻蜓网上找到它们... 两个搜索都没有任何运气。由于在这个问题上的沉默，以及 Shadow DOM + Shadow DOM 操作的发展性质，似乎可以得出一个安全的结论，那就是您不能在 Opera 中这样做，至少现在不能。

小开
最佳答案

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


提交答案