是否有一种跨浏览器的一致方式来隐藏一些浏览器(如Chrome)为数字类型的HTML输入呈现的新旋转框?我正在寻找一个CSS或JavaScript方法，以防止向上/向下箭头出现。
<input id="test" type="number">
当前回答
只添加这个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;
}
其他回答
简短的回答:
输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ 输入(type = "数量"]{ -moz-appearance:文本框; ｝ <input type="number" />
再答:
为了补充现有的答案……
Firefox:
在当前版本的Firefox中，(用户代理)这些元素上的-moz-appearance属性的默认值是number-input。将其更改为value文本字段有效地删除了旋转器。
input[type="number"] {
-moz-appearance: textfield;
}
在某些情况下，你可能希望旋转器一开始是隐藏的，然后出现在悬停/聚焦上。(这是目前Chrome的默认行为)。如果是，你可以使用以下方法:
输入(type = "数量"]{ -moz-appearance:文本框; } 输入(type = "数量"]:徘徊, 输入(type = "数量"]:专注{ -moz-appearance:输入数字; } < input type = "数量" / >
铬:
在当前版本的Chrome中，(用户代理)这些元素上的-webkit-appearance属性的默认值已经是textfield。为了删除旋转器，需要在::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类中将-webkit-appearance属性的值更改为none(默认为-webkit-appearance: inner-spin-button)。
输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ <input type="number" />
值得指出的是，在旧版本的Chrome中，margin: 0是用来删除边缘的。
目前，在写这篇文章时，这里是'inner-spin-button'伪类的默认用户代理样式:
input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
display: inline-block;
cursor: default;
flex: 0 0 auto;
align-self: stretch;
-webkit-user-select: none;
opacity: 0;
pointer-events: none;
-webkit-user-modify: read-only;
}
Firefox 29目前增加了对数字元素的支持，所以这里有一个代码片段，用于隐藏webkit和基于moz的浏览器中的旋转器:
输入(type =“数量”){ -moz-appearance:文本框; ｝ 输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { -webkit-appearance:没有; ｝ <input id="test" type="number">
试着用input type="tel"代替。它弹出一个数字键盘，没有显示旋转框。它不需要JavaScript或CSS或插件或其他任何东西。
为了在Safari中实现这一功能，我发现在webkit调整中添加了重要的功能，强制隐藏旋转按钮。
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none !important;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
我仍然在为Opera制定解决方案时遇到了麻烦。
这个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"的结果:
