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

本文翻译自：Can I hide the HTML5 number input’s spin box?

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? 跨浏览器是否有一致的方法来隐藏某些浏览器（如Chrome）为类型编号的HTML输入呈现的新旋转框？ I am looking for a CSS or JavaScript method to prevent the up/down arrows from appearing. 我正在寻找一种CSS或JavaScript方法来防止上/下箭头出现。

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

#1楼

参考：https://stackoom.com/question/FuC7/我可以隐藏HTML-号码输入的旋转框吗

#2楼

Try using input type="tel" instead. 请尝试使用input type="tel" 。 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. 它不需要JavaScript或CSS或插件或其他任何东西。

#3楼

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

#4楼

To make this work in Safari I found adding !important to the webkit adjustment forces the spin button to be hidden. 为了在Safari中使用，我发现添加！对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 */
}

I am still having trouble working out a solution for Opera as well. 我仍然无法为Opera制定解决方案。

#5楼

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-appearance property on these elements is number-input . 在当前版本的Firefox中，这些元素上的-moz-appearance属性的（用户代理）默认值是number-input 。 Changing that to the value textfield effectively removes the spinner. 将其更改为值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). （这是目前Chrome中的默认行为）。 If so, you can use the following: 如果是这样，您可以使用以下内容：

 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 . 在当前版本的Chrome中，这些元素上的-webkit-appearance属性的（用户代理）默认值已经是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). 为了删除微调器，需要在::-webkit-outer-spin-button / ::-webkit-inner-spin-button伪类上将-webkit-appearance属性的值更改为none （它是-webkit-appearance: 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: 0 is used to remove the margin in older versions 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;
}

#6楼

I've encountered this problem with a input[type="datetime-local"] , which is similar to this problem. 我在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 - >设置 - >常规 - >元素 - >显示用户代理阴影DOM”打开chrome的阴影根功能

Then you can see all shadowed DOM elements , for example, for <input type="number"> , the full element with shadowed DOM is: 然后你可以看到所有阴影的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>

And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said. 根据这些信息，您可以草拟一些CSS来隐藏不需要的元素，就像@Josh所说的那样。