首页 文章

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

提问于
浏览 次
1

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

我想要的样式是：

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

html css css3

2 回答

  • 0

    将样式应用于 <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>
    回复于
  • 0

    我找到了解决这个问题的方法 . 在chrome中无法为选择选项应用css样式，因为它可以在firefox中使用 .

    为了使它在firefox和chrome中工作，我使用ul和li构建了select或drop down .

    通过它我可以将我想要的任何样式应用于我的选择选项，这些选项只是列表项（li） .

    发现这个方法有一个问题，自动建议不会出现在我构建的下拉列表中，因为它是普通html选择框的默认行为 .

    回复于

相关问题