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

Question

我想在选择框中更改某个选项的样式（颜色，边框等...）。

示例：

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

第一个选项＆＃34;选择项目：＆＃34;没有任何价值，它更像是项目清单的标题。但我很好奇是否可以更改该选项的样式，并使其与选择框中的其他选项略有不同？

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>