jquery - 使用CSS的样式选择选项

Question

我正在尝试使用CSS设置选择选项列表的样式。我希望在列表的各个时间之间进行更多填充，因为看起来好像挤在一起了。我尝试将填充添加到option元素，但这似乎不起作用。有任何想法吗？

这是我的代码

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

Answer 1

如果我是正确的话，Firefox是唯一支持option元素的padding，height，margin或任何其他形式的大小更改的浏览器。 （至少Chrome浏览器不允许更改大小，并且您不能忽略Chrome用户），因此上述解决方案主要适用于Firefox和其他一些浏览器。

因此，您可以选择自己滚动或使用可修改性更高的javascript元素库（例如jquery-ui或twitter bootstrap）。