是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。
<input id="test" type="number">
是否有一种跨浏览器的一致方式来隐藏一些浏览器(如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">