使用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/

- user1038814

---

据我所知，没有办法更改它，浏览器控制着它。 - Alvin Wong

JQUERY方法，演示= http://jsfiddle.net/GUdhc/29/ - Barlas Apaydin

这可能会有用：https://dev59.com/zGQm5IYBdhLWcg3wrAmY#37773973 - dkellner

Answer 1

您可以尝试使用<optgroup>标签：

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

optgroup {
   padding: 5px 0px
}

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

- Ram

Answer 2

尝试在选项本身上设置样式，而不是在选择器上设置样式，并关注选项的填充和行高。 顺便说一下，你的选择器'.ms2side__div'是不正确的。该选择器有一个ID，因此请使用'select#second'或者只用'#second'。

- Reinder Wit

Answer 3

如果我没记错的话，Firefox是唯一支持对选项元素进行填充、高度、边距或任何其他大小修改的浏览器。（至少Chrome不允许任何形式的大小调整，而且你不能忽略Chrome用户），因此上面提到的解决方案主要适用于Firefox和可能适用于其他一些浏览器。

所以你的选择是自己编写代码或使用像jquery-ui或twitter bootstrap这样更可修改的javascript元素库。

- jakee

Answer 4

我在您的代码示例中更改了一些内容。但是对我来说，最好的结果就是所选元素的颜色更改：

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

如果您点击框中的某个内容，则会发现“已选择”的内容字体为红色。您不能通过这种方式更改填充、边距或其他属性。

您可能需要使用JavaScript的“OnChange”来实现此操作，但我不太懂。

- MattBoothDev