是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法,以防止向上/向下箭头出现。
<input id="test" type="number">
是否有一种跨浏览器的一致方式来隐藏一些浏览器(如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
外表的额外线条:对我来说都不是关键。
其他回答
根据苹果手机Safari的用户体验编码指南,你可以使用以下方法在iPhone浏览器中显示数字键盘:
<input type="text" pattern="[0-9]*" />
\d*的模式也可以。
这个CSS有效地隐藏了webkit浏览器的自旋按钮(已经在Chrome 7.0.517.44和Safari Version 5.0.2(6533.18.5)中进行了测试):
输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { /*显示:无;<-浏览器在悬停时崩溃*/ -webkit-appearance:没有; 保证金:0;/* <—显然一些边距仍然存在,尽管它被隐藏了*/ } 输入(type =数量){ -moz-appearance:文本框;/* Firefox */ } <input type="number" step="0.01" />
你总是可以使用检查器(webkit,可能是Firefox的Firebug)为你感兴趣的元素寻找匹配的CSS属性,寻找伪元素。下图显示输入元素type="number"的结果:
对我来说,在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在评论中指出这一点。
在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 '。 由于错误的选择器而忽略规则集。
每次我尝试。内部旋转按钮也是一样。
在WebKit和基于blink的浏览器和所有类型的浏览器中使用以下CSS:
/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}