CSS: lớp giả được chọn tương tự như: đã chọn, nhưng đối với <select> các yếu tố

Question

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

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

Answer 1

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

Nguồn: w3.org

---

Vì vậy, CSS này hoạt động, mặc dù styling color không thể có trong mọi trình duyệt:

option:checked { color: red; } 

---

Ví dụ về hành động này, ẩn mục hiện được chọn từ 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 tùy chọn được chọn hiện thời trong đóng thả xuống là tốt, bạn có thể thử đảo ngược logic:

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

Answer 2

Trên thực tế bạn chỉ có thể phong cách một số thuộc tính CSS trên : đã sửa đổi lựa chọn các nguyên tố ion. color không hoạt động, background-color một trong hai, nhưng bạn có thể đặt background-image.

Bạn có thể kết hợp điều này với độ dốc để 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 con tắc kè/webkit.

Answer 3

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

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