HTML hide Select drop down arrow with css

4
votes

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?

3
htmlcss
create a button that acts like a dropdown and give it functionality with javascript for example – baao
@baao has to be a select unfortunately – Steve
Can't you use javascript in your project? I don't think that you will find a html css only solution for this. I've searched for long, I really don't like the select's style. If you can use javascript/jQuery, maybe this is something for you harvesthq.github.io/chosen – baao
I am essentially using the Select as a display. I am populating the values of the options on the server side and then the client side is going to ajax to get the Data. The data is going to be an int instead of String (can't change that). And then I will be setting the Select's Value = value to display it. I could make another request to get the Enum List but... that's Plan B – Steve

3 Answers

3
votes

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.

2
votes

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

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

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.