如何为chrome

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是： border-radius：3px; border：1px solid＃757575; -webkit-appearance：none; -moz-外观：无;外观：无; background：url（images / caret_down.svg）no-repeat; background-repeat：no-repeat; background-size：1em; background-position：96％; min-width：5em; height：1.75em; padding-left： 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>