logo标签列表

我可以隐藏HTML5数字输入的旋转框吗？

htmlcssinputnumbers
1285
有没有一种在各种浏览器中隐藏某些浏览器（如Chrome）为HTML数字输入渲染的新旋转框的一致方法？我正在寻找一种CSS或JavaScript方法来防止上下箭头的出现。 

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

2
你能否发布一下你正在使用的代码示例？如果能提供一张截图，那就更好了，这样我们就知道你在看什么。我正在Chrome中查看<input type="number" min="4" max="8" />，并且看到一个带有上下箭头的典型输入框。 - calvinf
106
你正在看到我所看到的。我试图保持type=number标记以确保移动浏览器弹出适当的键盘，并防止在计算机浏览器中出现向上和向下箭头。 - Alan
5
如果您正在使用数字输入，请确保使用与现代iOS、Android和桌面浏览器兼容的内容：<input type="number" pattern="[0-9]*" inputmode="numeric">。更多信息请参见：https://dev59.com/XW025IYBdhLWcg3wKSiP#31619311。 - Aaron Gray
2
我建议的做法是编写类似于 <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > 的标记，并使用 jQuery Validati 或类似工具来处理验证。我尚未测试过这种方法，这也是为什么这是一条评论而不是答案的原因。 - Agi Hammerthief
你可能误用了输入类型，HTML规范解释说它“不适用于仅由数字组成但严格来说不是数字的输入”。https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate。还有其他属性可以控制触摸屏键盘，例如`inputmode`。 - Andy
20个回答
5

以下是我更好的建议，在鼠标悬停和非悬停情况下：

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; }
5
为了在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找到解决方案。

4
也许当您不想要微调控件时，可以使用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';

它完美地满足了我的需求。

4

虽然不是你要求的内容，但我这样做是因为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";
}

它可能会给你一些想法，帮助你解决所需的问题。
3
在Ubuntu上的Firefox浏览器中，只需使用以下命令：
    input[type='number'] {
    -moz-appearance:textfield;
}

这个方法对我很有帮助。
添加。
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

这会导致我走向

未知的伪类或伪元素“-webkit-outer-spin-button”。由于选择器错误，规则集被忽略。

每次尝试都是一样的。内部旋转按钮也是如此。

3
在基于 WebKit 和 Blink 的浏览器中以及所有类型的浏览器中，使用以下 CSS：
/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
2
其他人在多年前就已经写了同样的东西，那么你为什么还要添加这个呢？ - vsync
3

我需要这个工作起来

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

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

appearance: none多了一行很重要。

2
在Chrome浏览器上，对我而言只有display: none起作用。
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

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

感谢@philfreo在评论中指出。

1

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

-1

这就像你的 CSS 代码：

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
请不要重复现有的答案。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接