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

Question

我想更改 select 框中某些选项的样式（颜色、边框等...）。

示例：

<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:”没有任何值，它更像是项目列表的标题。但我很好奇是否可以更改该选项的样式，并使其与 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>

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

How to change style of particular option in select box?

html

css

select

styles

box