CODEWITHSUNDEEP
jqueryhtmlcss
user1038814
user1038814

Reputation: 9677

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 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/

Upvotes: 3

Views: 8998

Answers (4)

MattBoothDev
MattBoothDev

Reputation: 1334

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.

Upvotes: 0

jakee
jakee

Reputation: 18566

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.

Upvotes: 0

Ram
Ram

Reputation: 144729

you can try <optgroup> tag:

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

optgroup {
   padding: 5px 0px
}

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

Upvotes: 3

Reinder Wit
Reinder Wit

Reputation: 6615

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'

Upvotes: 0

Related Questions