Is there any way to add padding to select options via CSS?

Question

I want to add some kind of space (padding, margin or whatever) between select options in HTML using CSS. I am currently using Chrome and I've already tried using something like this:

 select option {
     padding: 10px
 }

However it didn’t work. I’ve already read that this is possible to do but it does not work in IE.

Anyway, I’d like to have this to work in other browsers even if it doesn't work in IE.

JSFiddle example

Answer 1

Styling to select option is very much limited as to maintain a coherence and consistency among all the application in the operating system thus the browser are ought to restrict the style of some basic elements like in your case option tag.

The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.

If it is very much necessary in you website to style the option tag then I suggest you to use some jQuery plugin (you can also make a drop down of your own, its simple).