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

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

当前回答

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

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

\d*的模式也可以。

其他回答

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

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

\d*的模式也可以。

Firefox 29目前增加了对数字元素的支持,所以这里有一个代码片段,用于隐藏webkit和基于moz的浏览器中的旋转器:

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

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

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

大多数浏览器都支持:

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

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

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; }

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