html - 为什么内联 CSS 仅在打开时更改 html 选定选项的颜色？

Question

这是我的代码:

<select id="xyz" name="xyz">
  <option></option>
  <option value="Monday">Monday</option>
  <option style="color:red;" selected="selected" value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
</select>

当我打开下拉菜单时，该选项是红色的。但是，当下拉菜单关闭时显示的所选元素不是红色的。

如何在下拉菜单关闭时也将元素设为红色？

Answer 1

你可以使用 CSS 来做到这一点

option[selected] {
            color: red;
        }
        option {
            color: black;
        }
        select {
            color: red;
        }

<select id="xyz" name="xyz">
    <option></option>
    <option value="Monday">Monday</option>
    <option  selected="selected" value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
	</select>