使用css的样式选择选项 [英] style select option using css

问题描述

我试图使用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?

以下是我的代码

HTML
$ b

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 >

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/

推荐答案

如果我是正确的，Firefox是唯一支持填充，高度，边距或任何其他类型的选项元素的大小修改的浏览器。 （至少Chrome不允许任何大小改变，并且您不能忽略Chrome用户），因此上述解决方案主要用于Firefox和其他一些浏览器。

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.

所以你的选择是滚动自己的或使用一个javascript元素库，如jquery-ui或twitter引导更可修改。

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

这篇关于使用css的样式选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！