我可以隐藏HTML5号码输入的旋转框吗？

Question

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

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

Answer 1

这个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属性,查找伪元素.此图显示输入元素类型="数字"的结果:

Answer 2

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 3

简短回答:

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-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 中的边距.

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

Answer 4

根据Apple的移动Safari用户体验编码指南,您可以使用以下内容在iPhone浏览器中显示数字键盘:

<input type="text" pattern="[0-9]*" />

一pattern的\d*也可以工作.

Answer 5

请尝试使用input type="tel".它弹出一个带数字的键盘,它不显示旋转框.它不需要JavaScript或CSS或插件或其他任何东西.

Answer 6

我找到了一个超级简单的解决方案

<input type="text" inputmode="numeric" />

大多数浏览器都支持：https : //developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Answer 7

如果您试图隐藏浏览器添加的控件，则应该暗示您正在滥用该输入类型。

标准一致性问题

根据type=number 的 HTML 规范：

该type=number状态不适合仅包含数字但严格来说不是数字的输入。例如，它不适用于信用卡号码或美国邮政编码。

（重点是我的）

可用性问题

GOV.UK 团队进行的可用性研究发现<input type=number>存在问题。该团队维护着世界上最著名的设计系统之一，并得出结论，该输入类型：

• 使用龙自然说话时无法听写或选择
• 在 NVDA 的元素列表中显示为未标记
• 在 NVDA 的对象导航中显示为旋转按钮，其中有一个编辑字段和两个按钮- 这些按钮未标记，但减少/增加值
• 使用 nvda+tab 时报告为未标记的编辑字段

替代解决方案

相反，他们建议使用<input type="text" inputmode="numeric" pattern="[0-9]*">@team_steve 和 @youjin 的综合答案。这不仅隐藏了旋转框，还提高了元素的整体可用性。

不用说，需要进行额外的验证以及有用的错误文本。

<label>Postal Code
<input type="text" inputmode="numeric" pattern="[0-9]*" size="5">
</label>

Answer 8

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

来源

Answer 9

仅添加此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;
}

Answer 10

我遇到过这个问题input[type="datetime-local"],这与这个问题类似.

我找到了克服这类问题的方法.

首先,你必须通过"DevTools - >设置 - >常规 - >元素 - >显示用户代理阴影DOM"打开chrome的阴影根功能

然后你可以看到所有阴影的DOM元素,例如,<input type="number">带有阴影DOM的完整元素是:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

根据这些信息,您可以草拟一些CSS来隐藏不需要的元素,就像@Josh所说的那样.

Answer 11

为了在 Safari 中实现此功能，我发现添加!important到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 的解决方案。

Answer 12

这是更好的答案，我想建议鼠标悬停和不悬停

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }