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

不是你要求的，但我这样做是因为WebKit中的一个重点bugspinbox：

// temporary fix for focus bug with webkit input type=number uiif (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";}

它可能会给你一个想法来帮助你所需要的。

此CSS有效地隐藏了webkit浏览器的自旋按钮（已在Chrome7.0.517.44和Safari版本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" />

You can always use the inspector (webkit, possibly Firebug for Firefox) to look for matched CSS properties for the elements you are interested in, look for Pseudo elements. This image shows results for an input element type="number":

根据苹果移动Safari用户体验编码指南，您可以使用以下方法在iPhone浏览器中显示数字键盘：

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

\d*的pattern也将起作用。

尝试使用input type="tel"代替。它会弹出一个带有数字的键盘，并且不会显示旋转框。它不需要JavaScript或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">

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

简短的回答：

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

Longer answer:

To add to existing answer...

Firefox:

In current versions of Firefox, the (user agent) default value of the -moz-appearance property on these elements is number-input. Changing that to the value textfield effectively removes the spinner.

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:

In current versions of Chrome, the (user agent) default value of the -webkit-appearance property on these elements is already textfield. In order to remove the spinner, the -webkit-appearance property's value needs to be changed to none on the ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo classes (it is -webkit-appearance: inner-spin-button by default).

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

<input type="number" />

It's worth pointing out that margin: 0 is used to remove the margin in older versions of Chrome.

Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:

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

我在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说的那样。

也许当你不想要微调器时，用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';

这对我的目的很有效

在Firefox for Ubuntu上，只是使用

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

为我做了这个把戏。

添加

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

会引导我

未知的伪类或伪元素'-webkit-outter-spin-按钮'。由于选择器错误，规则集被忽略。

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

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

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

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

我需要这个工作

/* Chrome, Safari, Edge, Opera */input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button-webkit-appearance: noneappearance: nonemargin: 0
/* Firefox */input[type=number]-moz-appearance: textfield

appearance: none的额外行对我来说是关键。

在基于WebKit和Blink的浏览器中&All Kind Of Browser使用以下CSS：

/* Disable Number Arrow */input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}

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

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

大多数浏览器都支持：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

• https://caniuse.com/input-inputmode

这就像你的css代码：

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

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

标准一致性问题

从类型=数字的超文本标记语言规范：

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>

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

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

来源