CODEWITHSUNDEEP
css
Kiran
Kiran

Reputation: 916

Select box customization using CSS

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.

Upvotes: 0

Views: 57

Answers (1)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 1

Related Questions