是否有一种跨浏览器的一致方式来隐藏一些浏览器(如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在评论中指出这一点。

其他回答

也许当你不想要旋转器时,用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';

这对我来说很有效

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

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::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

这个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"的结果:

对我来说,在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在评论中指出这一点。