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属性，查找伪元素。此图像显示输入元素类型=“数字”的结果：

Inspector for input type=number (Chrome)

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

简答：

＆＃13;

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

＆＃13;

<input type="number" />

＆＃13;

更长的回答：

添加到现有答案......

火狐：

在当前版本的Firefox中，这些元素上-moz-appearance property的（用户代理）默认值为number-input。将其更改为值textfield会有效地删除微调器。

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

在某些情况下，您可能希望微调器最初隐藏，然后显示在悬停/焦点上。（这是目前Chrome中的默认行为）。如果是这样，您可以使用以下内容：

＆＃13;

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

＆＃13;

<input type="number"/>

＆＃13;

铬：

在当前版本的Chrome中，这些元素上的-webkit-appearance property的（用户代理）默认值已为textfield。为了删除微调器，-webkit-appearance / none伪类需要将::-webkit-outer-spin-button属性的值更改为::-webkit-inner-spin-button（{{1}默认情况下）。

＆＃13;

-webkit-appearance: inner-spin-button

＆＃13;

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

＆＃13;

值得指出的是<input type="number" />用于删除旧版版Chrome中的边距。

目前，在编写本文时，以下是“内部旋转按钮”的默认用户代理样式。伪类：

margin: 0

Answer 4

根据Apple’s user experience coding guide for mobile Safari，您可以使用以下内容在iPhone浏览器中显示数字键盘：

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

pattern \d*也可以。

Answer 5

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

Answer 6

我使用

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

def HenonMap(a,b,x,y):
return 1 - a*x**2 + y, b*x


from pylab import *
import numpy.linalg as LA
a = 1.4
b = 0.3
nIterates = 100
xlabel('x(n)') # set x-axis label
ylabel('y(n)') # set y-axis label

nICs = 10000
xmin = -6
xmax = 0.6
xinc = (xmax - xmin) / nICs
ymin =  -0.18
ymax =   0.18
yinc = (ymax - ymin) / nICs
x = []
y = []

for i in xrange(0,nICs):
    x.append(xmin + (xmax - xmin) * xinc * i)
    y.append(ymin + (ymax - ymin) * yinc * i)
for n in range(0,nIterates):
    for i in range(0,nICs):
        x[i], y[i] = HenonMap(a,b,x[i],y[i])
plot(x,y, '-r')

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

Answer 7

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

我使用input[type="datetime-local"]遇到了这个问题，这与此问题类似。

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

首先，你必须通过＆＃34; DevTools - ＆gt;打开chrome的阴影根功能。设置 - ＆gt;一般 - ＆gt;元素 - ＆gt;显示用户代理阴影DOM＆＃34;

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

＆＃13;

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

＆＃13;

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

Answer 9

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 10

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

Answer 11

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

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

Answer 12

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

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

Answer 13

在Firefox for Ubuntu上，只需使用

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

为我做了诀窍。

添加

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

会引导我

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

我每次尝试。内部旋转按钮也是如此。

Answer 14

可用性问题

在 GOV.UK 团队执行的 a usability study 期间发现 <input type=number> 有问题。该团队维护着世界上最著名的设计系统之一，并得出结论认为这种输入类型：

<块引用>

不能是dictated or selected when using Dragon Naturally Speaking
显示为 unlabeled in NVDA's element list
显示为 spin button in NVDA's object navigation, which has an edit field and two buttons inside - 这些按钮未标记，但减少/增加价值
在使用 nvda+tab 时报告为 unlabeled edit field

替代解决方案

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

Answer 15

当您不想要一个微调器时，可能会将使用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';

它适用于我的目的

Answer 16

为了在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制定解决方案。

Answer 17

您可以在CSS文件中使用以下简单代码：

<h1>Hello, World!</h1>

Answer 18

我需要这个才能工作

/* 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的额外一行是我的关键。

Answer 19

这就像您的CSS代码：

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

Answer 20

对我来说，在 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 在评论中指出这一点。

Answer 21

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

Source

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

21 个答案:

简答：

更长的回答：

火狐：

铬：

可用性问题

替代解决方案