如何在选择框中更改特定选项的样式

Question

我想在选择框中更改某些选项的样式(颜色，边框等)。

的例子:

<select name="items">
  <option>Select item:</option>
  <option value="item1"> item1 </option>
  <option value="item2"> item2 </option>
  <option vlaue="item3"> item3 </option>
</select>

第一个选项" Select item: "没有任何值，它更像是项目列表的标题。但是我很好奇是否可以改变该选项的样式，并使其与选择框中的其他选项有所不同?

Answer 1

select{
  background:red;
}
option:first-child{
  background:yellow;
  color:green;
}

<select name="items">
  <option>Select item:</option>
  <option value="item1"> item1 </option>
  <option value="item2"> item2 </option>
  <option vlaue="item3"> item3 </option>
</select>