是否有一种跨浏览器的一致方式来隐藏一些浏览器(如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
外表的额外线条:对我来说都不是关键。
其他回答
我找到了一个超级简单的解决方法
<input type="text" inputmode="numeric" />
大多数浏览器都支持:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode https://caniuse.com/input-inputmode
不是你要求的，但我这样做是因为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";
}
它可能会给你一个想法来帮助你。
这个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, 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 '。 由于错误的选择器而忽略规则集。
每次我尝试。内部旋转按钮也是一样。
