是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法，以防止向上/向下箭头出现。
<input id="test" type="number">
当前回答
我需要这个成功
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
-webkit-appearance: none
appearance: none
margin: 0
/* Firefox */
input[type=number]
-moz-appearance: textfield
外表的额外线条:对我来说都不是关键。
其他回答
也许当你不想要旋转器时，用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="text" inputmode="numeric" />
大多数浏览器都支持:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode
Firefox 29目前增加了对数字元素的支持，所以这里有一个代码片段，用于隐藏webkit和基于moz的浏览器中的旋转器:
输入(type =“数量”){ -moz-appearance:文本框; ｝ 输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { -webkit-appearance:没有; ｝ <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;
}
试着用input type="tel"代替。它弹出一个数字键盘，没有显示旋转框。它不需要JavaScript或CSS或插件或其他任何东西。
