Tôi có thể tô màu nền của các mục đã chọn trong HTML, chỉ chọn các tùy chọn với CSS không?

Question

Tôi đã tìm kiếm xung quanh rất nhiều và thấy mọi người gợi ý rằng:

::-moz-selection {background: red;} 
::selection {background: red; } 

..works cho màu nền của các mặt hàng đang được chọn trong một lựa chọn nhiều mục mẫu. (Lưu ý: Ý tôi là các mục đã chọn, không phải là các mục có tiêu điểm).

Tôi không thể làm việc này. Tôi có làm sai không?

#dropdowns select::selection { 
    background: red; 
} 

Cheers:/

Setup: Sử dụng Chrome dành cho Mac

Answer 1

Thay vì chỉ thiết lập một background-color bạn cũng có thể thiết lập một tuyến tính gradient như nền:

option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

này hoạt động trong IE11 và Chrome mới nhất và Firefox. Safari chỉ bỏ qua nó. Không kiểm tra IE/Edge.

Nếu bạn muốn thiết lập màu nền duy nhất cho tập trung nhiều lựa chọn bạn có thể sử dụng đoạn mã này:

select[multiple]:focus option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

Xem toàn bộ bản demo ở đây: http://codepen.io/marceltschopp/pen/PNyqKp

Answer 2

::selection không áp dụng cho tùy chọn đã chọn; nó áp dụng cho văn bản được đánh dấu. Hoặc bạn hiểu sai các đề xuất của họ hoặc những gì họ nói là không đúng.

Theo this answer, bạn đang nghĩ để có thể sử dụng option:checked cho việc tạo kiểu các mục đã chọn:

#dropdowns option:checked { 
    background: red; 
} 

Nhưng tôi đã không thể có được nó để làm việc cho <select> hoặc <select multiple> yếu tố trong this test fiddle .

Answer 3

CSS Selector phù hợp với bạn sẽ là :checked

:: lựa chọn chỉ dành cho văn bản đã được nhấn mạnh:

• http://reference.sitepoint.com/css/pseudoelement-selection

Answer 4

Tôi thấy điều này bởi vì tôi đã có cùng một vấn đề, tôi đã tìm thấy một giải pháp kỳ lạ mà dường như làm việc atleast với chrome và có lẽ những người khác. Giải pháp là sử dụng bộ chọn thuộc tính. Điều này dường như làm việc với chrome, tôi đã thử nghiệm nó trong js fiddle. Một lưu ý phụ rằng hộp đã không ngay lập tức thay đổi màu sắc thành nền đỏ nhưng một khi tôi đã chọn một tùy chọn khác tôi có thể thấy rõ ràng rằng nó đã thực sự chuyển sang màu đỏ. Bạn có thể kiểm tra nó trong jsfiddle được liệt kê ở trên.

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] { 
    background: red; 
}