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

Question

我能隐藏HTML 5数字输入的旋转框吗？是否有一种跨浏览器的一致方法来隐藏某些浏览器(如Chrome)为类型为HTML输入而呈现的新的旋转框？我正在寻找一个CSS或JavaScript方法，以防止上下箭头出现。<input id="test" type="number">

Answer 1

Firefox 29目前增加了对数字元素的支持，因此这里有一个代码片段，用于在基于webkit和Moz的浏览器中隐藏旋转器：

input[type='number'] {

    -moz-appearance:textfield;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

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

Answer 2

简短答覆：

input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

input[type="number"] {

    -moz-appearance: textfield;

}

<input type="number" />

较长的答覆：

为了增加现有的答案.。

Firefox：

在当前版本的Firefox中，-moz-appearance财产关于这些元素number-input..将其更改为值textfield有效地移除旋转器。

input[type="number"] {
    -moz-appearance: textfield;}

在某些情况下，您可能希望隐藏旋转器。最初，然后出现在悬停/焦点上。(这是Chrome当前的默认行为)。如果是这样的话，您可以使用以下方法：

input[type="number"] {

    -moz-appearance: textfield;

}

input[type="number"]:hover,

input[type="number"]:focus {

    -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 {

    -webkit-appearance: none;

    margin: 0;

}

<input type="number" />

值得指出的是margin: 0用于移除老一点Chrome的版本。

目前，在编写这篇文章时，下面是在“内部自旋按钮”伪类上进行样式设置的默认用户代理：

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;}