本文翻译自: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所说的那样。