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

Solution 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).

Solution 2:

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.