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

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

当前回答

对我来说,在chrome上什么都没有工作,但显示:没有。

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

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

感谢@philfreo在评论中指出这一点。

其他回答

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

在Firefox for Ubuntu上,只是在使用

    input[type='number'] {
    -moz-appearance:textfield;
}

帮我搞定了。

添加

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

会让我

未知伪类或伪元素' -webkit-outer-spin-button '。 由于错误的选择器而忽略规则集。

每次我尝试。内部旋转按钮也是一样。

为了在Safari中实现这一功能,我发现在webkit调整中添加了重要的功能,强制隐藏旋转按钮。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

我仍然在为Opera制定解决方案时遇到了麻烦。

也许当你不想要旋转器时,用javascript将数字输入更改为文本输入;

document.getElementById('myinput').type = 'text';

并停止用户输入文本;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

然后让javascript把它改回来,以防你确实想要一个旋转器;

document.getElementById('myinput').type = 'number';

这对我来说很有效

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

标准一致性问题

来自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"> < / >标签