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

在浏览器中是否存在一致的方式来隐藏某些浏览器（例如Chrome）为types号的HTMLinput呈现的新的旋转框？ 我正在寻找一个CSS或JavaScript的方法，以防止上/下箭头出现。

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

Answer 1

这个CSS有效地隐藏了webkit浏览器的旋转button（已经在Chrome 7.0.517.44和Safari 5.0.2（6533.18.5）中testing过）：

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

您始终可以使用检查器（webkit，可能是Firebug for Firefox）为您感兴趣的元素查找匹配的CSS属性，查找伪元素。 此图像显示input元素type =“number”的结果：

Answer 2

Firefox 29目前增加了对数字元素的支持，所以这里是一个隐藏在基于webkit和moz的浏览器中的spinners的片段：

 input[type='number'] { -moz-appearance:textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } 

Answer 3

简短的回答：

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

Answer 4

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

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

\d* pattern也可以工作。

Answer 5

尝试使用input type="tel"代替。 它popup一个数字键盘，它不显示旋钮框。 它不需要JavaScript或插件。

Answer 6

 input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } //Supports Mozilla input[type=number] { -moz-appearance:textfield; } <input type="number"/> 

Answer 7

我遇到了一个类似于这个问题的input[type="datetime-local"]问题。

而且我find了解决这类问题的方法。

首先，你必须通过“开发工具 – >设置 – >常规 – >元素 – >显示用户代理阴影DOM”打开铬的影子根function。

然后你可以看到所有的被遮蔽的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> 

Answer 8

不是你所要求的，但是我这样做是因为WebKit中带有spinbox的焦点错误：

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

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

Answer 9

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

Answer 10

在Ubuntu的Firefox上，只是使用

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

为我做了诡计。

添加

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

会导致我

未知的伪类或伪元素“-webkit-outer-spin-button”。 由于select器错误，规则集被忽略。

每当我尝试。 内旋钮也一样。

Answer 11

为了在Safari浏览器中实现这一function，我发现在webkit调整中添加！重要的是强制隐藏旋转button。

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

我仍然遇到麻烦解决scheme的Opera以及。

Answer 12

这是更好的答案，我想build议在鼠标hover，没有鼠标hover

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

Answer 13

也许更改数字inputJavaScript的文本input，当你不想要一个微调;

 document.getElementById('myinput').type = 'text'; 

并停止用户input文字;

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

它为我的目的运作良好

Answer 14

你正在使用的规范是不是最终的东西，所以我会说，不会，将有一个完全一致的，跨浏览器的方式来解决这个问题。

只是使用inputtypes=“文本”，并使用JavaScriptvalidation的forms，以确保它是一个数字。