使用 css 的样式选择选项答案

【问题标题】：style select option using css使用 css 的样式选择选项
【发布时间】：2017-04-01 06:42:39
【问题描述】：

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

【问题讨论】：

没有办法改变那个AFAIK，浏览器控制它。
JQUERY方式，DEMO = jsfiddle.net/GUdhc/29
这可能会奏效：stackoverflow.com/questions/17419957/…

标签： jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以试试<optgroup>标签：

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

optgroup {
   padding: 5px 0px
}

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

【讨论】：

【解决方案3】：

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

因此，您的选择是自行开发或使用更易于修改的 javascript 元素库，例如 jquery-ui 或 twitter bootstrap。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：