blocks|key|920771|text|这个CSS有效地隐藏了webkit浏览器的旋转按钮(已经在Chrome+7.0.517.44和Safari版本5.0.2+(6533.18.5)中进行了测试)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|920772|​|920773|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+*/
}|code-block|syntax|javascript|920774|<input+type="number"+step="0.01"+/>|920775|920776|您可以随时使用检查器(webkit，可能是Firefox的Firebug+)来查找您感兴趣的元素的匹配CSS属性，查找伪元素。下图显示了输入元素编号“type=”的结果：|920777|920778|📷|atomic|offset|length|920779|920780|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fd77d42a6845528339bf1e07346ada84.png|imageAlt^0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1A|8|@]|9|@$R|1B|S|1C|1|1D]]|A|$]]|$1|T|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

<p>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)):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; &lt;- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* &lt;-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" step="0.01" /&gt;</code></pre>
</div>
</div>
</p>

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

<p><img src="https://i.stack.imgur.com/QATjk.png" alt="Inspector for input type=number (Chrome)"></p>


blocks|key|1135471|text|Firefox+29目前添加了对number元素的支持，所以这里有一个代码片段，用于在基于webkit和moz的浏览器中隐藏微调器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1135472|​|1135473|input[type='number']+{
++++-moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button+{
++++-webkit-appearance:+none;
}|code-block|syntax|javascript|1135474|<input+id="test"+type="number">|1135475|1135476|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="test" type="number"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1135350|text|根据Apple’s+user+experience+coding+guide+for+mobile+Safari的说法，您可以使用以下命令在iPhone浏览器中显示数字键盘：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1135351|<input+type="text"+pattern="[0-9]*"+/>|code-block|syntax|javascript|1135352|\d*的pattern也可以工作。|style|CODE|1135353|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index.html#//apple_ref/doc/uid/DTS40008248-CH1-SUBSECTION11^0|2|1I|0|0|0|0|3|4|7|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]|$A|12|B|13|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>According to <a href="http://developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index.html#//apple_ref/doc/uid/DTS40008248-CH1-SUBSECTION11" rel="noreferrer">Apple’s user experience coding guide for mobile Safari</a>, you can use the following to display a numeric keyboard in the iPhone browser:</p>



<pre class="lang-html prettyprint-override"><code>&lt;input type="text" pattern="[0-9]*" /&gt;
</code></pre>

<p>A <code>pattern</code> of <code>\d*</code> will also work.</p>


blocks|key|920848|text|请尝试使用input+type="tel"。它会弹出一个带有数字的键盘，而且不会显示数字框。它不需要JavaScript、CSS、插件或其他任何东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|920849|entityMap^0|5|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Try using <code>input type="tel"</code> 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.</p>


blocks|key|921301|text|我找到了一个非常简单的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921302|<input+type="text"+inputmode="numeric"+/>|code-block|syntax|javascript|921303|大多数浏览器都支持这一点：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|offset|length|921304|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode^0|0|0|D|25|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I found a super simple solution using </p>

<pre><code>&lt;input type="text" inputmode="numeric" /&gt;
</code></pre>

<p>This is supported is most browsers: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode</a></p>


blocks|key|920628|text|这不是你想要的，但我这么做是因为WebKit的spinboxes中的一个焦点bug：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|920629|//+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";
}|code-block|syntax|javascript|920630|它可能会给你一个想法，帮助你做你需要的事情。|920631|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:</p>

<pre><code>// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") &gt; -1 &amp;&amp; navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}
</code></pre>

<p>It might give you an idea to help with what you need.</p>


blocks|key|921064|text|这是更好的答案，我想建议鼠标悬停和不鼠标悬停|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921065|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;+}|code-block|syntax|javascript|921066|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is more better answer i would like to suggest on mouse over and without mouse over</p>

<pre><code>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; }
</code></pre>


blocks|key|921226|text|在基于WebKit和Blink的浏览器中，所有类型的浏览器都使用以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921227|/*+Disable+Number+Arrow+*/
input[type=number]::-webkit-inner-spin-button,+
input[type=number]::-webkit-outer-spin-button+{+
++-webkit-appearance:+none;+
++margin:+0;+
}|code-block|syntax|javascript|921228|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In WebKit and Blink-based browsers &amp; All Kind Of Browser  use the following CSS :</p>

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


blocks|key|1135536|text|当你不需要旋转器时，也许可以用javascript将数字输入改为文本输入；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1135537|document.getElementById('myinput').type+=+'text';|code-block|syntax|javascript|1135538|并阻止用户输入文本；|1135539|++document.getElementById('myinput').onkeydown+=+function(e)+{
++if(!((e.keyCode+>+95+&&+e.keyCode+<+106)
++++%7C%7C+(e.keyCode+>+47+&&+e.keyCode+<+58)+
++++%7C%7C+e.keyCode+==+8
++++%7C%7C+e.keyCode+==+9))+{
++++++++++return+false;
++++++}
++}|1135540|然后让javascript把它改回来，以防你确实需要一个旋转器；|1135541|document.getElementById('myinput').type+=+'number';|1135542|对于我的目的，它工作得很好|1135543|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Maybe change the number input with javascript to text input when you don't want a spinner;</p>

<pre><code>document.getElementById('myinput').type = 'text';
</code></pre>

<p>and stop the user entering text;</p>

<pre><code>  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode &gt; 95 &amp;&amp; e.keyCode &lt; 106)
    || (e.keyCode &gt; 47 &amp;&amp; e.keyCode &lt; 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }
</code></pre>

<p>then have the javascript change it back in case you do want a spinner;</p>

<pre><code>document.getElementById('myinput').type = 'number';
</code></pre>

<p>it worked well for my purposes</p>


blocks|key|921129|text|我需要这样做才行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921130|/*+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|code-block|syntax|javascript|921131|额外的appearance:+none行对我来说是关键。|offset|length|style|CODE|921132|entityMap^0|0|0|3|G|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I needed this to work</p>

<pre><code>/* 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
</code></pre>

<p>The extra line of <code>appearance: none</code> was key to me.</p>


blocks|key|921418|text|/*+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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|921419|Source|unstyled|offset|length|921420|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp^0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>/* 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;
}
</code></pre>
<p><a href="https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp" rel="nofollow noreferrer">Source</a></p>


blocks|key|921001|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921002|input[type=number]::-webkit-inner-spin-button,+
input[type=number]::-webkit-outer-spin-button+{
+++++-webkit-appearance:+none;|code-block|syntax|javascript|921003|<input+id="test"+type="number">|921004|921005|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="test" type="number"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|921365|text|这就像你的css代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|921366|input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button+{
++-webkit-appearance:+none;
++margin:+0;
}|code-block|syntax|javascript|921367|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This like your css code:</p>
<pre><code>input[type=&quot;number&quot;]::-webkit-outer-spin-button,
input[type=&quot;number&quot;]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</code></pre>


blocks|key|1135961|text|对我来说，在chrome上，除了display:+none，没有什么是有效的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1135962|/*+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;
}|code-block|syntax|javascript|1135963|感谢@philfreo在评论中指出这一点。|1135964|entityMap^0|G|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>For me on chrome nothing has worked but <code>display: none</code>.</p>
<pre><code>/* 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;
}
</code></pre>
<p>Credits to @philfreo for pointing it out in the comments.</p>


<p>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.</p>

<pre><code>&lt;input id="test" type="number"&gt;
</code></pre>


Can I hide the HTML5 number input’s spin box?

是否有一种跨浏览器的一致方法来隐藏某些浏览器(如Chrome)为类型number的HTML输入呈现的新数字调整框？我正在寻找一个CSS或JavaScript的方法，以防止向上/向下箭头出现。<input id="test" type="number">

问我可以隐藏HTML5数字输入的数字调整框吗？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以隐藏HTML5数字输入的数字调整框吗？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以隐藏HTML5数字输入的数字调整框吗？
EN