HTML隐藏选择带有css的下拉箭头

时间:2014-12-12 00:52:28

标签: html css

是否有一种好方法可以隐藏所有浏览器的默认下拉箭头?我知道问题已被问过几次,但似乎没有一个适用于所有浏览器的解决方案,它们都不好看。几年已经过去了,我想知道现在是否有一个好的解决方案?

3 个答案:

答案 0 :(得分:3)

我能做到最好的方法是:

    select::-ms-expand
    {
        display: none;
    }
    select
    {
        -webkit-appearance: none;
        -moz-appearance: none;      
        appearance: none;
        padding: 2px 30px 2px 2px;
        /*border: none; - if you want the border removed*/
    }

适用于Chrome和IE。

很遗憾,在您的情况下, -moz-appearance:none 目前似乎并未得到完全支持。

这里有一个错误:https://bugzilla.mozilla.org/show_bug.cgi?id=649849它有一个已解决的固定状态,但似乎依赖于另一个错误:https://bugzilla.mozilla.org/show_bug.cgi?id=1076846具有NEW状态,所以希望很快就能解决。< / p>

答案 1 :(得分:2)

https://gist.github.com/joaocunha/6273016/

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0.1;
    text-overflow: '';
}

答案 2 :(得分:0)

对于webkit浏览器,-webkit-appearance: none将删除所有默认浏览器的select样式。请记住,这是可靠的,但它将删除所有样式,而不仅仅是箭头。目前还没有其他可靠的解决方案。