我可以隐藏HTML5号码输入的旋转框吗？-Java 学习之路

762

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

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

13 回答

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

回复于 2024-05-08T06:38:31+08:00

382

不是你要求的，但是我这样做是因为WebKit中有一个焦点错误，有旋转框：

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会帮助您提供所需的帮助 .

回复于 2024-05-08T06:38:31+08:00

852

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

回复于 2024-05-08T06:38:31+08:00

当你不想要一个微调器时，也许用javascript改变输入的数字到文本输入;

document.getElementById('myinput').type = 'text';

并停止用户输入文字;

document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

然后让javascript更改它，以防你想要一个微调器;

document.getElementById('myinput').type = 'number';

它适用于我的目的

回复于 2024-05-08T06:38:31+08:00

Only add this css to remove spinner on input of number

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

回复于 2024-05-08T06:38:31+08:00

8
根据Apple’s user experience coding guide for mobile Safari，您可以使用以下内容在iPhone浏览器中显示数字键盘：
```
<input type="text" pattern="[0-9]*" />
```
\d* 的 pattern 也可以 .
回复于 2024-05-08T06:38:31+08:00
3
我用 input[type="datetime-local"] 遇到了这个问题，这与这个问题类似 .

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

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

然后你可以看到所有 shadowed DOM elements ，例如，对于 <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>
```
![shadow DOM of inputtype="number"

根据这些信息，您可以草拟一些CSS来隐藏不需要的元素，就像@Josh所说的那样 .
回复于 2024-05-08T06:38:31+08:00

311

为了在Safari中实现这一点，我发现在webkit调整中添加！important会强制隐藏旋转按钮 .

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制定解决方案 .

回复于 2024-05-08T06:38:31+08:00

1
简答：
```
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 property的（用户代理）默认值为 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：

在当前版本的Chrome中，这些元素上的-webkit-appearance property的（用户代理）默认值已经是 textfield . 为了删除微调器， -webkit-appearance 属性的值需要在 ::-webkit-outer-spin-button / ::-webkit-inner-spin-button 伪类上更改为 none （默认情况下为 -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;
}
```
回复于 2024-05-08T06:38:31+08:00

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;

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

回复于 2024-05-08T06:38:31+08:00

118
这个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 */
}
```
您始终可以使用检查器（webkit，可能是Firebug for Firefox）查找您感兴趣的元素的匹配CSS属性，查找伪元素 . 此图像显示输入元素类型=“数字”的结果：
回复于 2024-05-08T06:38:31+08:00

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

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

回复于 2024-05-08T06:38:31+08:00

2
在Firefox上用于Ubuntu，只需使用
```
input[type='number'] {
    -moz-appearance:textfield;
}
```
为我做了诀窍 .

添加
```
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
```
会引导我

未知的伪类或伪元素'-webkit-outer-spin-button' . 由于选择器错误而忽略了规则集 .

每次我试过 . 内部旋转按钮也是如此 .
回复于 2024-05-08T06:38:31+08:00

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

13 回答

简答：

更长的回答：

Firefox：

Chrome：

相关问题