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

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; }