是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法，以防止向上/向下箭头出现。
<input id="test" type="number">
当前回答
在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;
}
其他回答
这就像你的css代码:
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
源
只添加这个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;
}
不是你要求的，但我这样做是因为WebKit中的spinboxes的焦点bug:
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
它可能会给你一个想法来帮助你。
在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 '。 由于错误的选择器而忽略规则集。
每次我尝试。内部旋转按钮也是一样。
