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

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

当前回答

只添加这个css删除旋转输入的数字

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

其他回答

根据苹果手机Safari的用户体验编码指南,你可以使用以下方法在iPhone浏览器中显示数字键盘:

<input type="text" pattern="[0-9]*" />

\d*的模式也可以。

我找到了一个超级简单的解决方法

<input type="text" inputmode="numeric" />

大多数浏览器都支持:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode

输入(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';

这对我来说很有效

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

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