utilizando: antes con el elemento de opción en una lista desplegable

Estoy tratando de agregar contenido a la opción seleccionada en una lista desplegable usando css, cuando el menú desplegable está cerrado. Específicamente quiero que el desplegable diga

Ordenar por: Option1

cuando está cerrado y cuando abre el menú desplegable, verá la Opción 1, la Opción 2, etc.

Encontré esto:

CSS: pseudo clase seleccionada similar a: marcada, pero para elementos

que muestra cómo aplicar un estilo a lo correcto, pero cuando trato de aplicar: antes del elemento de opción, no aparece nada, bajo ninguna circunstancia. Es decir, parece que no puedo usar el

option:before{ content:"before option" } 

Como regla a cualquier efecto.

¿Es este siempre el caso de los elementos de opción? También descubrí que no podía ajustar el texto de opción en clases de intervalo, por lo que no puedo hacerlo de esa manera.

Debería utilizar una para indicar para qué sirve . No puede usar pseudo-elementos en los elementos de porque solo los elementos de son válidos dentro de un . La otra razón por la que no querría hacer esto es porque los pseudo-elementos generalmente son omitidos por los lectores de pantalla, lo que hace que la etiqueta no sea accesible para una parte o la población y ciertas tecnologías de asistencia.

Esta es la forma correcta de asociar una etiqueta como “Ordenar por” con una lista desplegable:

Manifestación

  

o

   

Si necesita “Ordenar por:” dentro de la lista desplegable, debe agregar esa etiqueta dentro del HTML o inyectarla con JavaScript, ya que CSS no puede hacer esto. Yo sugeriría argumentar que no es la forma correcta de ir con su diseñador, ya que tendrá un montón de texto redundante y el menú desplegable se verá feo.

Así es como se inyectaría la etiqueta dentro de la lista desplegable utilizando jQuery:

Manifestación

 $('option').each(function () { $(this).text("Sort by: " + $(this).text()); }); 

En la especificación de CSS 2.1, el :before pseudo-elemento está algo vagamente definido, y dice: ” Nota. Esta especificación no define completamente la interacción de: antes y: después con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una futura especificación ”. Aunque la option no está vacía como input , aún es bastante especial. No hay definición de aclaración en las nuevas especificaciones de CSS.

En la práctica, los navegadores ignoran principalmente :before y :after para elementos de control como select y sus hijos. Las pruebas con Firefox, IE, Chrome muestran que actualmente solo Firefox implementa la option:before { content: ... } , y solo cuando el elemento select está “abierto” (ya sea enfocado de modo que la lista de opciones se abra o tenga un atributo de size con un valor mayor que 1).

Por lo tanto, el enfoque no es factible y debe considerar una mejor manera de lidiar con el problema final. Aparentemente, ya descubrió que es preferible utilizar una etiqueta visible a usar contenido generado.