我可以隐藏HTML5数字输入的旋转框吗？ [英] Can I hide the HTML5 number input’s spin box?

问题描述

跨浏览器是否有一致的方法来隐藏某些浏览器（例如Chrome）为类型number的HTML输入呈现的新旋转框？我正在寻找一个CSS或JavaScript方法来防止向上/向下箭头出现。

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.

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

推荐答案

这个CSS有效地隐藏了webkit浏览器（已在Chrome 7.0.517.44和Safari版本5.0.2（6533.18.5）中测试过）：

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

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，可能是Firefox的Firebug）来查找您感兴趣的元素的匹配CSS属性，查找伪元素。此图片显示输入元素type =number的结果：

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 elemnts. This image shows results for an input element type="number":

这篇关于我可以隐藏HTML5数字输入的旋转框吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！