Style Select Option Using Css

I'm trying to style a select option list using CSS. I want more padding between the times of the list because the seem squashed together. I've tried adding padding to the option el

Solution 1:

you can try <optgroup> tag:

<optgroup><optionvalue="1">Option a 1</option></optgroup>

optgroup {
   padding: 5px 0px
}

http://jsfiddle.net/GUdhc/5/

Solution 2:

If I'm correct, Firefox is the only browser that supports padding, height, margin or any other kind of modification of the size for the option element. (At least Chrome doesn't allow any sort of size altering and you can't ignore Chrome users) so the solutions mentioned above work mostly for Firefox and maybe for some other browsers.

So your option is to roll your own or use a javascript element library like jquery-ui or twitter bootstrap that are more modifiable.

Solution 3:

try setting the styling on the option itself instead of on the select, and focus on padding and line-height for the options. by the way, your selector '.ms2side__div' is incorrect. The select has an ID, so use 'select#second' or just '#second'

Solution 4:

I changed a few things in your code sample there. But it looks to me like the best you're going to get is a colour change of the selected element:

http://jsfiddle.net/GUdhc/25/

If you then click on something in the box you'll see the "selected" ones are in a red font. You can't change the padding, margin or others that way.

You may need to use javascript "OnChange" to do this but that's beyond me.