协慌网

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

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

这个 CSS 有效地隐藏了 webkit 浏览器的旋转按钮（已在 Chrome 7.0.517.44 和 Safari Version 5.0.2（6533.18.5）中测试过）：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

您始终可以使用检查器（webkit，可能是 Firebug for Firefox）查找您感兴趣的元素的匹配 CSS 属性，查找伪元素。此图显示输入元素类型 =“数字” 的结果：

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

简短回答：

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 中，这些元素上的-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-outer-spin-button / ::-webkit-inner-spin-button伪类上将-webkit-appearance属性的值更改为none （它是-webkit-appearance: 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 中的保证金。

目前，在撰写本文时，这里是'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;
}