我能隐藏HTML 5数字输入的旋转框吗？

Question

我能隐藏HTML 5数字输入的旋转框吗？

是否有一种跨浏览器的一致方法来隐藏某些浏览器(如Chrome)为类型为HTML输入而呈现的新的旋转框？我正在寻找一个CSS或JavaScript方法，以防止上下箭头出现。

<input id="test" type="number">

Answer 1

Firefox 29目前增加了对数字元素的支持，因此这里有一个代码片段，用于在基于webkit和Moz的浏览器中隐藏旋转器：input[type='number'] {&nbsp; &nbsp; -moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {&nbsp; &nbsp; -webkit-appearance: none;}<input id="test" type="number">

Answer 2

简短答覆：input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; margin: 0;}input[type="number"] {&nbsp; &nbsp; -moz-appearance: textfield;}<input type="number" />较长的答覆：为了增加现有的答案.。Firefox：在当前版本的Firefox中，-moz-appearance财产关于这些元素number-input..将其更改为值textfield有效地移除旋转器。input[type="number"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;-moz-appearance:&nbsp;textfield;}在某些情况下，您可能希望隐藏旋转器。最初，然后出现在悬停/焦点上。(这是Chrome当前的默认行为)。如果是这样的话，您可以使用以下方法：input[type="number"] {&nbsp; &nbsp; -moz-appearance: textfield;}input[type="number"]:hover,input[type="number"]:focus {&nbsp; &nbsp; -moz-appearance: number-input;}<input type="number"/>铬：在当前版本的Chrome中，-webkit-appearance财产关于这些元素已经textfield..为了移除旋转器，-webkit-appearance属性的值需要更改为none在::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类(它是-webkit-appearance: inner-spin-button(默认情况下)。input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; margin: 0;}<input type="number" />值得指出的是margin: 0用于移除老一点Chrome的版本。目前，在编写这篇文章时，下面是在“内部自旋按钮”伪类上进行样式设置的默认用户代理：input::-webkit-inner-spin-button&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;-webkit-appearance:&nbsp;inner-spin-button; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;default; &nbsp;&nbsp;&nbsp;&nbsp;flex:&nbsp;0&nbsp;0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;align-self:&nbsp;stretch; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-select:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;pointer-events:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-modify:&nbsp;read-only;}