style select option using css

Question

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 element, but this doesn't seem to work. ANy ideas?

Here's my code

HTML

<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
   <option value="1" style="padding: 10px;">Option a 1</option>
   <option value="2" SELECTED >Option b 2(sel)</option>
   <option value="3">Option c 3</option>
   <option value="4" SELECTED >Option d 4 (sel)</option>
   <option value="5">Option e 5</option>
   <option value="6">Option f 6</option>
   <option value="7">Option g 7</option>
   <option value="8">Option h 8</option>
   <option value="9">Option i 9</option>
   <option value="10" SELECTED >Option l 10 (sel)</option>
</select>

CSS

.ms2side__div select {
    width: 220px;
    float: left;
    border: 1px solid #BFBFBF;
    background: white;
    font-size: 12px;
    color: #9D9D9D;
    font-family: Arial, Helvetica, sans-serif; 
    padding: 10px;
    line-height: 25px;
}

http://jsfiddle.net/noscirre/GUdhc/

There is no way to change that AFAIK, the browser controls that. — Alvin Wong, Jun 20 '12 at 11:30
This might do the trick: https://stackoverflow.com/questions/17419957/how-can-i-change-the-font-size-of-a-select-option/37773973#37773973 — dkellner, Jul 09 '18 at 11:27

score 3 · Answer 1 · answered Jun 20 '12 at 11:32

3

you can try <optgroup> tag:

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

optgroup {
   padding: 5px 0px
}

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

answered Jun 20 '12 at 11:32

Ram

143,282
16
168
197

score 0 · Answer 2 · answered Jun 20 '12 at 11:31

0

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'

answered Jun 20 '12 at 11:31

Reinder Wit

6,490
1
25
36

score 0 · Accepted Answer · answered Jun 20 '12 at 11:43

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.

score 0 · Answer 4 · answered Jun 20 '12 at 11:44

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.

style select option using css

4 Answers4

Linked