如何为 chrome 中的选择控件选项应用 css 样式

Question

我有一个带有一些选项的选择框，我需要应用特定于选择控件选项的样式。

我想要应用的样式是：

color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;

我已将 .taskpanel-select-control 类分配给我的选择控件， 并添加了css

.taskpanel-select-control option{
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}

我的选择控件的 CSS 是： 边框半径：3px；边框：1px 实心#757575；-webkit-appearance：无； -moz 外观：无；外观：无；背景：url（images/caret_down.svg）不重复；背景重复：不重复；背景大小：1em；背景位置：96%；最小宽度：5em；高度：1.75em；填充左： 0.5em;padding-right: 2em;

但是这些在选择选项中没有得到尊重，有什么办法可以做到这一点。

Image of Select Box

Answer 1

我想出了解决这个问题的办法。 在 chrome 中无法为选择选项应用 css 样式，而在 Firefox 中则可以。

为了使其在 firefox 和 chrome 中都能正常工作，我使用 ul 和 li 构建了 select 或 drop down。

通过它，我可以将我想要的任何样式应用于我的选择选项，这些选项不过是列表项 (li)。

发现这种方法存在一个问题，自动建议没有出现在我构造的下拉列表中，因为它是正常 html 选择框的默认行为。

Answer 2

将样式应用于您的<options> 应该与应用于任何其他元素一样简单：

.taskpanel-select-control option {
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}

p {
font-weight: bold;
}

<p>&lt;select&gt; containing unstyled &lt;option&gt; elements:</p>

<select>
<option>Registration</option>	
<option>Completion</option>	
<option>State</option>	
<option>Archive</option>
</select>

<p>&lt;select&gt; containing styled &lt;option&gt; elements:</p>

<select class="taskpanel-select-control">
<option>Registration</option>	
<option>Completion</option>	
<option>State</option>	
<option>Archive</option>
</select>