Czy mogę pokolorować tła wybranych elementów w opcjach zaznaczania HTML za pomocą tylko CSS?

Question

Rozglądałem się wokół partii i zobaczyć ludzi sugerujące, że:

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

..works do malowania tła aktualnie wybranych elementów w wielu select elementu formularza. (Uwaga: mam na myśli wybrane przedmioty, a nie przedmioty z naciskiem).

Nie mogę tego uruchomić. Czy robię to źle?

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

Okrzyki:/

Setup: Korzystanie z Chrome dla Mac

Answer 1

Zamiast tylko ustawienie background-color Można również ustawić liniowym gradientem w tle:

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

Działa to w IE11 i najnowszy Chrome i Firefox. Safari po prostu je ignoruje. Nie przetestowałem IE/Edge.

Jeśli chcesz ustawić kolor tła tylko dla skupia wielu wybiera można użyć tego fragmentu:

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

Zobacz pełną wersję demo tutaj: http://codepen.io/marceltschopp/pen/PNyqKp

Answer 2

::selection nie stosuje się do wybranych opcji; dotyczy podświetlonego tekstu. Albo źle interpretujesz ich sugestie, albo to, co powiedzieli, jest błędne.

Według this answer, masz za zadanie, aby móc korzystać z option:checked do stylizacji wybrane pozycje:

#dropdowns option:checked { 
    background: red; 
} 

Ale nie udało się dostać do pracy <select> lub <select multiple> elementów this test fiddle .

Answer 3

Prawo Selektor CSS dla ciebie byłoby :checked

:: wybór jest tylko dla tekstu, które zostało podkreślone: ​​

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

Answer 4

Znalazłem bo mającego ten sam problem, znalazłem dziwne rozwiązanie, które wydaje się działać conleast z chrome i może innym. Rozwiązaniem było użycie selektora atrybutów. To wydawało się działać z chromem, testowałem to w js fiddle. Zauważyłem, że pudełko nie zmieniło od razu koloru na czerwony, ale gdy wybrałem inną opcję, mogłem wyraźnie zobaczyć, że rzeczywiście zmieniło kolor na czerwony. Możesz to sprawdzić w jsfiddle wymienionym powyżej.

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

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