CSS: lớp giả được chọn tương tự như: đã chọn, nhưng dành cho các phần tử <select>

Có cách nào để tạo kiểu cho <option>phần tử đang được chọn trong một <select>phần tử không?

Sau đó, tôi có thể cung cấp màu nền cho phần tử tùy chọn hiện được chọn không? Bằng cách đó, tôi có thể tạo kiểu cho tùy chọn hiện có thể xem được trong menu thả xuống đã đóng.

các :checkedpseudo-class ban đầu áp dụng đối với các yếu tố như vậy có HTML4 selectedvà checkedthuộc tính

Nguồn: w3.org

Vì vậy, CSS này hoạt động, mặc dù colorkhông thể tạo kiểu trong mọi trình duyệt:

option:checked { color: red; }

Một ví dụ về điều này trong hoạt động, ẩn mục hiện được chọn khỏi danh sách thả xuống.

option:checked { display:none; }

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Để tạo kiểu cho tùy chọn hiện được chọn trong menu thả xuống đã đóng , bạn có thể thử đảo ngược logic:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */

Trên thực tế, bạn chỉ có thể tạo kiểu cho một vài thuộc tính CSS trên : các phần tử tùy chọn đã sửa đổi . colorcũng không hoạt động, background-colornhưng bạn có thể đặt a background-image.

Bạn có thể kết hợp điều này với gradient để thực hiện thủ thuật.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Hoạt động trên gecko / webkit.

Điều này đã làm việc cho tôi:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}