javascript - 我可以隐藏HTML5号码输入的旋转框吗？(Can I hide the HTML5 number input’s spin box?)

Question

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

  ask by Alan translate from so

Answer 1

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 Version 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.

(您始终可以使用检查器（webkit，可能是Firebug for Firefox）查找您感兴趣的元素的匹配CSS属性，查找伪元素。)

This image shows results for an input element type="number":

(此图显示输入元素类型=“数字”的结果：)