需要突出显示的 HTML 选择选项

Question

我正在创建一个 HTML 下拉列表。这是我的代码

http://jsfiddle.net/dineshk/u47xjqLv/

HTML

<select>
    <option class="first"  style="display:none;">HH</option>  
    <option class="green">Hello</option> 
    <option>Magazine</option>         

</select>

我已将第一个 Option 赋予 Display:none，这样它就不会显示在下拉列表中。那是工作。酷 !!!!，但我无法为第一个 选项 着色，因此它是下拉列表的标题，请帮助我找到答案

Answer 1

选项1

您可以在 select 和 option 上设置颜色，为下拉菜单和占位符文本 (HH) 设置颜色。

Fiddle

示例

select {
  color: red;
}

select option {
  color: black;
}

选项 2

如果第一个选项 (Hello) 纯粹是一个标题并且您不希望它被选中，那么您应该将它设置为disabled。然后，您可以相应地设置样式。

Fiddle

示例

<select>
  <option class="first"  style="display:none;">HH</option>  
  <option disabled class="green">Hello</option> 
  <option>Magazine</option>         
</select>

select option[disabled] {
  color: red;
}