Come cambiare il colore dello span all’interno dell’opzione select?

Come cambiare il colore di span in rosso nell’opzione select? in js fiddle voglio cambiare il colore di This is a required field. al colore rosso inserisci la descrizione dell'immagine qui

 select{ color: green; } select option { color: black; } select option .myError{ color:red } 
  Color: This is a required field.  Color: Midnight Blue Color: Radar Red  

Dopo aver reso DOM puoi controllare l’elemento, vedrai che lo span verrà rimosso. Ecco perché le proprietà di stile CSS non funzionano perché non esistono span o classi. .myError esiste.

In altre parole il tag dell’opzione non può consentire altri tag.

Ecco un’idea stravagante che utilizza una sovrapposizione sopra la modalità di selezione e mix-blend, quindi controllo il cambio di colore usando CSS varibale.

 $('select').change(function(){ $(this).parent().attr('style','--color:'+$(this).find(':selected').data('color')); }) 
 .select { position: relative; display: inline-block; --color:red; } .select:before { content: ""; position: absolute; right: 20px; top: 1px; bottom: 1px; left: 40px; background: var(--color); mix-blend-mode: lighten; } select option { color: black; } 
  

Non è ansible utilizzare un tag html all’interno del tag . Tuttavia puoi ottenerlo usando css:

 select{ color: red; } select option { color: black; } select option:first-child{ color:red } .mid-blue{ color: #0000CD; } .radar-red{ color: #FF0000; }