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

Question

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

示例:

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

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

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>