Question

我正在尝试使用CSS设置选择选项列表的样式。我希望在列表的时间之间有更多的填充，因为似乎压扁了。我已经尝试添加填充到选项元素，但这似乎不起作用。任何想法？

这是我的代码

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

您可以尝试<optgroup>代码：

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

optgroup {
   padding: 5px 0px
}

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

Answer 2

尝试在选项本身而不是选择上设置样式，并专注于选项的填充和行高。顺便说一句，你的选择器'.ms2side__div'是不正确的。 select有一个ID，所以使用'select＃second'或'#second'

Answer 3

如果我是正确的，Firefox是唯一支持填充，高度，边距或任何其他类型的选项元素大小修改的浏览器。（至少Chrome不允许任何类型的尺寸更改，你不能忽视Chrome用户）所以上面提到的解决方案主要适用于Firefox，也许适用于其他一些浏览器。

所以你的选择是自己滚动或者使用jquery-ui或twitter bootstrap这样更易修改的javascript元素库。

Answer 4

我在那里更改了代码示例中的一些内容。但在我看来，你所获得的最好的是所选元素的颜色变化：

http://jsfiddle.net/GUdhc/25/

如果您再单击框中的某些内容，您将看到“已选择”的内容为红色字体。您无法通过这种方式更改填充，边距或其他内容。

您可能需要使用javascript“OnChange”来执行此操作，但这超出了我的范围。

使用css选择样式

4 个答案: