是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。

<input id="test" type="number">

当前回答

输入(type =数量)::-webkit-inner-spin-button, 输入(type =数量)::-webkit-outer-spin-button { -webkit-appearance:没有; <input id="test" type="number">

其他回答

不是你要求的,但我这样做是因为WebKit中的spinboxes的焦点bug:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会给你一个想法来帮助你。

如果您试图隐藏浏览器添加的控件,这应该是您滥用该输入类型的提示。

标准一致性问题

来自type=number的HTML规范:

type=number状态不适合只由数字组成但严格来说不是数字的输入。例如,它不适用于信用卡号或美国邮政编码。

(重点是我的)

可用性问题

在GOV.UK团队进行的可用性研究中,发现<input type=number>有问题。该团队维护着世界上最著名的设计系统之一,并得出结论,这种输入类型:

使用Dragon natural时不能被指定或选择 说话 在NVDA的元素列表中显示为未标记 在NVDA的对象导航中显示为旋转按钮,其中有一个编辑字段和两个按钮-这些按钮是未标记的, 但是减少/增加价值 当使用nvda+标签时,被报告为未标记的编辑字段

可选择的解决方案

相反,他们建议使用<input type="text" inputmode="numeric" pattern="[0-9]*">,这可以得到@team_steve和@youjin的组合答案。这不仅隐藏了旋转框,还提高了元素的整体可用性。

不用说,还需要进行额外的验证,以及有用的错误文本。

<标记>邮政编码 <input type="text" inputmode="numeric" pattern="[0-9]*" size="5"> < / >标签

这个CSS有效地隐藏了webkit浏览器的自旋按钮(已经在Chrome 7.0.517.44和Safari Version 5.0.2(6533.18.5)中进行了测试):

输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { /*显示:无;<-浏览器在悬停时崩溃*/ -webkit-appearance:没有; 保证金:0;/* <—显然一些边距仍然存在,尽管它被隐藏了*/ } 输入(type =数量){ -moz-appearance:文本框;/* Firefox */ } <input type="number" step="0.01" />

你总是可以使用检查器(webkit,可能是Firefox的Firebug)为你感兴趣的元素寻找匹配的CSS属性,寻找伪元素。下图显示输入元素type="number"的结果:

这是更好的答案,我想建议鼠标在上面和没有鼠标在上面

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

我需要这个成功

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

外表的额外线条:对我来说都不是关键。