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

Answer 1

The appearance of option tags is determined by the browser in my experience and often for good reason - think about how differently the appearance is on iOS v chrome and the benefits of this.

You can exert some control of the select element however, by using the browser prefixed appearance attribute.

For example:

select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

However when clicked, they appear as they normally do in whatever browser you're using.

If you want finer control, your best bet I think is @sumitb.mdi's suggestion of a jquery plugin or build something similar yourself from scratch.