¿Puedo colorear fondos de los elementos seleccionados en las opciones de selección de HTML con solo CSS?

Question

He buscado en torno a una gran cantidad de personas y ver lo que sugiere que:

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

..works para colorear el fondo de los elementos seleccionados actualmente en un elemento de selección múltiple formulario. (Nota: Me refiero a los elementos seleccionados, no a los elementos con foco).

No puedo hacer que esto funcione. ¿Lo estoy haciendo mal?

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

Saludos:/

de configuración: El uso de Chrome para Mac

Answer 1

En lugar de establecer una fondo de color también se puede establecer un gradiente lineal como fondo:

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

Esto funciona en EI11 y la última Chrome y Firefox. Safari simplemente lo ignora. No probé IE/Edge.

Si desea establecer el color de fondo sólo para enfocada múltiples selecciona puede utilizar este fragmento:

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

Ver la demo completa aquí: http://codepen.io/marceltschopp/pen/PNyqKp

Answer 2

::selection no se aplica a las opciones seleccionadas; se aplica al texto resaltado. O malinterpretas sus sugerencias, o lo que dijeron es completamente erróneo.

Según this answer, se supone que debes ser capaz de utilizar option:checked para estilizar los elementos seleccionados:

#dropdowns option:checked { 
    background: red; 
} 

pero no he sido capaz de conseguir que funcione para <select> o <select multiple> elementos en this test fiddle .

Answer 3

el selector CSS adecuado para usted sería :checked

:: selección sólo para el texto que se ha destacado:

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

Answer 4

me encontré con esto porque yo estaba teniendo el El mismo problema, encontré una solución extraña que parece funcionar al menos con Chrome y tal vez con otros. La solución fue usar un selector de atributos. Esto pareció funcionar con Chrome, lo probé en el violín js. Una nota al margen es que la caja no cambió inmediatamente de color a rojo de fondo, pero una vez que seleccioné otra opción pude ver claramente que efectivamente se había puesto roja. Puede verificarlo en el jsfiddle listado arriba.

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

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