Add padding to the select options and change the border color

Question

I want to style all the options inside select tag. My markup is like this

<select>
    <option>Milk</option>
    <option>Eggs</option>
    <option>Lettuce</option>
    <option>Tomatoes</option>
    <option>Cream of chicken soup</option>
    <option>Butter</option>
</select>

Now I want to add padding for all options and also want to change the border color of the box when all the options can be seen at the time of click on select. So how can I do that? I have tried

select option {
padding: 20px 0px;
}

But its not working at all. Can someone tell me how to solve this? Any help and suggestions will be really appreciable. Thanks

Fiddle link is here

Answer 1

Webkit Browsers do not support styling of option element.

Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.

You should rather use ul li elements or use jquery plugins like select2,chosen.

Answer 2

Using the following, would only work in Firefox but not in Chrome

select option {
    padding:20px 30px;
}

Example

You can't style that what you want using CSS (at the moment at least). I have already answered this question. How to change colour of blue highlight on select box dropdown

You have few options:

1. Is to convert select into ul, li kind of select and do anything you want with this.

2. Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.