Javascript 我可以隐藏 HTML5 数字输入的旋转框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3790935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I hide the HTML5 number input’s spin box?
提问by Alan
Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down arrows from appearing.
是否有跨浏览器一致的方法来隐藏某些浏览器（例如 Chrome）为类型编号的 HTML 输入呈现的新旋转框？我正在寻找一种 CSS 或 JavaScript 方法来防止出现向上/向下箭头。
<input id="test" type="number">
回答by antonj
This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):
此 CSS 有效地隐藏了 webkit 浏览器的旋转按钮（已在 Chrome 7.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":
您始终可以使用检查器（webkit，可能是 Firefox 的 Firebug）为您感兴趣的元素查找匹配的 CSS 属性，查找伪元素。下图显示了输入元素 type="number" 的结果：
回答by swehren
Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:
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">回答by Josh Crozier
Short answer:
简短的回答：
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-appearancepropertyon these elements is number-input. Changing that to the value textfieldeffectively removes the spinner.
在当前版本的 Firefox 中，这些元素上-moz-appearance属性的（用户代理）默认值为number-input。将其更改为该值可以textfield有效地删除微调器。
input[type="number"] {
-moz-appearance: textfield;
}
In some cases, you may want the spinner to be hidden initially, and then appear on hover/focus. (This is currently the default behavior in Chrome). If so, you can use the following:
在某些情况下，您可能希望微调器最初是隐藏的，然后出现在悬停/焦点上。（这是当前 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-appearancepropertyon these elements is already textfield. In order to remove the spinner, the -webkit-appearanceproperty's value needs to be changed to noneon the ::-webkit-outer-spin-button/::-webkit-inner-spin-buttonpseudo classes (it is -webkit-appearance: inner-spin-buttonby default).
在当前版本的 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" />It's worth pointing out that margin: 0is used to remove the margin in olderversions of Chrome.
值得指出的margin: 0是，用于删除旧版本 Chrome中的边距。
Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:
目前，在撰写本文时，这里是“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;
}
回答by team_steve
According to Apple's user experience coding guide for mobile Safari, you can use the following to display a numeric keyboard in the iPhone browser:
根据Apple 的移动版 Safari 用户体验编码指南，您可以使用以下内容在 iPhone 浏览器中显示数字键盘：
<input type="text" pattern="[0-9]*" />
A patternof \d*will also work.
A patternof\d*也将起作用。
回答by MERT DO?AN
Try using input type="tel"instead. It pops up a keyboard with numbers, and it doesn't show spin boxes. It requires no JavaScript or CSS or plugins or anything else.
尝试使用input type="tel"。它会弹出一个带有数字的键盘，但不显示旋转框。它不需要 JavaScript 或 CSS 或插件或其他任何东西。
回答by Sanjib Debnath
Only add this css to remove spinner on input of number
仅添加此 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;
}
回答by Xiao Hanyu
I've encountered this problem with a input[type="datetime-local"], which is similar to this problem.
我在 a 上遇到过这个问题input[type="datetime-local"]，它与这个问题类似。
And I've found a way to overcome this kind of problems.
我已经找到了克服这类问题的方法。
First, you must turn on chrome's shadow-root feature by "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM"
首先，你必须通过“DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM”开启chrome的shadow-root功能
Then you can see all shadowed DOM elements, for example, for <input type="number">, the full element with shadowed DOM is:
然后你可以看到所有阴影 DOM 元素，例如 for <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>
And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.
根据这些信息，您可以起草一些 CSS 来隐藏不需要的元素，就像@Josh 所说的那样。
回答by Gaurav
Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:
不是你要求的，但我这样做是因为带有旋转框的 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";
}
It might give you an idea to help with what you need.
它可能会给您一个想法来帮助您解决您的需求。
回答by Prince Sharma
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;<input id="test" type="number">回答by Swap-IOS-Android
This is more better answer i would like to suggest on mouse over and without mouse over
这是更好的答案，我想建议鼠标悬停和不悬停
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; }
