Home/ Questions/Q 8112467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T02:30:35+00:00

I’m trying to style a select option list using CSS. I want more padding

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0