3

我正在尝试使用 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/

4

4 回答 4

3

你可以试试<optgroup>标签：

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

optgroup {
   padding: 5px 0px
}

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

于 2012-06-20T11:32:10.197 回答
0

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

于 2012-06-20T11:31:03.567 回答
0

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

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

于 2012-06-20T11:43:00.580 回答
0

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

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

如果您然后单击框中的某些内容，您将看到“选定”的内容为红色字体。您不能以这种方式更改填充、边距或其他内容。

You may need to use javascript "OnChange" to do this but that's beyond me.

于 2012-06-20T11:44:48.897 回答