Select box customization using CSS

Question

There are many questions asking the same. I have gone through all and confused with the following situation. I have a select box and text box. I want both to have a particular height and border.

So, I define the following class for both

   .selClass
    {    

        border: 1px solid #CCC;
        height: 40px;   
        color:red; 

    } 


  <select class="selClass">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>

This is working fine. But, while going through the other questions regarding the same, it is understood that select is controlled at os level and the style we can apply to select box using css is very minimal.

If so, is there any error in my code for browser compatibility? I checked with IE9+, Edge, Mozilla, Chrome, iphone and this is working fine. So, I think my code is fine. Please comment on this.

If my code is right, how it is working fine because, to my understanding, select cannot be controlled by css. Please help.

Remember, not only browsers - it shows differently based on devices/OS. — Jim Fahad
– Jim Fahad, Commented Nov 9, 2016 at 13:33
but, the code I have give is working same in IE9+, Edge, Mozilla, Chrome. Hence, I got this doubt — Kiran
– Kiran, Commented Nov 9, 2016 at 13:44

Saurav Rastogi · Accepted Answer · 2016-11-09 13:31:34Z

1

You need to add appearance: none; so that the browser didn't take the system's default select box.

Just like:

select {
  -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
}

Or look at the snippet below:

.select-style {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;

    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 200px;
    height: 35px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}

<div class="select-style">
  <select>
    <option value="volvo">Option 1</option>
    <option value="saab">Option 2</option>
    <option value="mercedes">Option 3</option>
    <option value="audi">Option 4</option>
  </select>
</div>

Hope this helps!

answered Nov 9, 2016 at 13:31

Saurav Rastogi

9,7313 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kiran Over a year ago

thanks for this. But, without adding this also, browser is not taking system's default select box and taking from css only. curious to know why so.

Kiran Over a year ago

also,adding appearance has any impact on mobile devices because in mobile devices, i like to have its own implementation of select?

Saurav Rastogi Over a year ago

@Kiran Can you please post an example code or give a link on fiddle?

Saurav Rastogi Over a year ago

@Kiran Yes select box will take the custom css if there is defined appearance: none;

Kiran Over a year ago

I have edited my question with sample code. it is working in all bowsers which is the reason for my doubt.

Collectives™ on Stack Overflow

Select box customization using CSS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related