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

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

当前回答

在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 '。 由于错误的选择器而忽略规则集。

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

其他回答

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

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

试着用input type="tel"代替。它弹出一个数字键盘,没有显示旋转框。它不需要JavaScript或CSS或插件或其他任何东西。

在WebKit和基于blink的浏览器和所有类型的浏览器中使用以下CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}