是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。
<input id="test" type="number">
是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。
<input id="test" type="number">
当前回答
输入(type =数量)::-webkit-inner-spin-button, 输入(type =数量)::-webkit-outer-spin-button { -webkit-appearance:没有; <input id="test" type="number">
其他回答
Firefox 29目前增加了对数字元素的支持,所以这里有一个代码片段,用于隐藏webkit和基于moz的浏览器中的旋转器:
输入(type =“数量”){ -moz-appearance:文本框; } 输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { -webkit-appearance:没有; } <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
外表的额外线条:对我来说都不是关键。
在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 '。 由于错误的选择器而忽略规则集。
每次我尝试。内部旋转按钮也是一样。
输入(type =数量)::-webkit-inner-spin-button, 输入(type =数量)::-webkit-outer-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