我能隐藏HTML 5数字输入的旋转框吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (104)

是否有一种跨浏览器的一致方法来隐藏某些浏览器(如Chrome)为类型为HTML输入而呈现的新的旋转框?我正在寻找一个CSS或JavaScript方法,以防止上下箭头出现。

<input id="test" type="number">
提问于
用户回答回答于

这个CSS有效地隐藏了webkit浏览器的旋转按钮(在Chrome 7.0.517.44和Safari版本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属性,查找伪元素。此图像显示输入元素类型=“Number”的结果:

用户回答回答于

简短答覆:

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

较长的答覆:

为了增加现有的答案.。

Firefox:

在当前版本的Firefox中,-moz-appearance财产关于这些元素number-input。将其更改为值textfield有效地移除旋转器。

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

在某些情况下,您可能希望隐藏旋转器。最初,然后出现在悬停/焦点上。(这是Chrome当前的默认行为)。如果是这样的话,您可以使用以下方法:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>


chrome:

在当前版本的Chrome中,-webkit-appearance财产关于这些元素已经textfield。为了移除旋转器,-webkit-appearance属性的值需要更改为none::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类(它是-webkit-appearance: inner-spin-button(默认情况下)。

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

值得指出的是margin: 0用于移除老一点Chrome的版本。

目前,在编写这篇文章时,下面是在“内部自旋按钮”伪类上进行样式设置的默认用户代理:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

所属标签

可能回答问题的人

  • 找虫虫

    0 粉丝0 提问5 回答
  • 骑牛看晨曦

    4 粉丝522 提问4 回答
  • 爸爸

    腾讯 · 客户端安全 (已认证)

    3 粉丝4 提问4 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问4 回答

扫码关注云+社区

领取腾讯云代金券