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

Question

Is there a good way hide the default drop down arrow for all browsers? I know the question has been asked couple times but there does NOT seem to be a solution which would work for all browsers and neither of them look nice. Couple years has passed already and I wonder if there exists a good solution now?

Answer 1

The best way I could fine is this:

    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*/
    }

This works in Chrome and IE.

Unfortunately in your case -moz-appearance:none does not seem to currently be fully supported.

There is a bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849 which which has a RESOLVED FIXED status but seems to be dependant on another bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1076846 which has a NEW status so hopefully it will be fixed soon.

Answer 2

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

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

Answer 3

For webkit browswers, -webkit-appearance: none will remove ALL of the default browser's select styling. Keep in mind that this is reliable, but it will remove ALL styling, not just the arrow. There is no other dependable solution at this point.