是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法，以防止向上/向下箭头出现。
<input id="test" type="number">
当前回答
我在输入[type="datetime-local"]时遇到过这个问题，它与这个问题类似。
我已经找到了克服这类问题的方法。
首先，你必须打开chrome的阴影根功能“DevTools ->设置->通用->元素->显示用户代理阴影DOM”
然后你可以看到所有阴影DOM元素，例如，对于<input type="number">，带阴影DOM的完整元素是:
< input type = "数量" > <div id="text-field-container" pseudo="-webkit-textfield-decoration-container"> < div id = " editing-view-port " > < div id = " inner-editor " > < / div > < / div > <div pseudo="-webkit-inner-spin-button" id="spin"></div> . < / div > 输入> < /
根据这些信息，你可以起草一些CSS来隐藏不需要的元素，就像@Josh说的那样。
其他回答
在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 '。 由于错误的选择器而忽略规则集。
每次我尝试。内部旋转按钮也是一样。
也许当你不想要旋转器时，用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';
这对我来说很有效
我在输入[type="datetime-local"]时遇到过这个问题，它与这个问题类似。
我已经找到了克服这类问题的方法。
首先，你必须打开chrome的阴影根功能“DevTools ->设置->通用->元素->显示用户代理阴影DOM”
然后你可以看到所有阴影DOM元素，例如，对于<input type="number">，带阴影DOM的完整元素是:
< input type = "数量" > <div id="text-field-container" pseudo="-webkit-textfield-decoration-container"> < div id = " editing-view-port " > < div id = " inner-editor " > < / div > < / div > <div pseudo="-webkit-inner-spin-button" id="spin"></div> . < / div > 输入> < /
根据这些信息，你可以起草一些CSS来隐藏不需要的元素，就像@Josh说的那样。
我找到了一个超级简单的解决方法
<input type="text" inputmode="numeric" />
大多数浏览器都支持:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode
对我来说，在chrome上什么都没有工作，但显示:没有。
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
感谢@philfreo在评论中指出这一点。
