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

问题描述

是否有一种跨浏览器一致的方法来隐藏某些浏览器(例如 Chrome)为类型编号的 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 */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

您始终可以使用检查器(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 elements. This image shows results for an input element type="number":

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