Rouge sur le premier <option> d'un <select>

Salut tout le monde, ça faisait une E-TER-NI-TÉ que je n'étais pas revenu ici.
On y fait toujours le plein de Kiwis ?

Je bosse sur un CMS qui ne me laisse PAS la main sur le formulaire, html/php.
Cependant, je peux atteindre et modifier les CSS. Ce qui me va déjà très très bien
Je souhaite rendre la première OPTION "c0" selected d'un SELECT comme étant indésirable EN ROUGE à l'ouverture du navigateur car sa valeur est nulle"- " si on choisit une autre option, celle-ci devrait apparaître en vert.
Donc comme je ne peux pas agir sur le formulaire il faut créer cette alerte visuelle.

<style>select{color: white; background-color: blue}
option:default, [value="c0"], [selected], option:first-child, option:focus{background: red; color:white;}
</style>		
<select name="test" id="test1">
	<option selected  value="c0">-</option>
	<option  value="dog">dog</option>
	<option value="cat">cat</option>
	<option value="lapin">lapin</option>
</select>

Un pt'it coup de main ?
Merci à vous !!!

Personne ?

Bonjour,

Il doit être possible de faire des trucs avec Firefox mais PAS Chrome. Instylable.
Il te faudra donc ah non t'as pas la main. Mmh ajouter une étiquette au champ, ça aidera à comprendre que la 1ère option n'est pas euh souhaitable, qu'il faut choisir autre chose.

Bonjour,

peut-être as tu accès à JavaScript ? , si oui , tu peut voir à ajouter l'attribut disabled à la volée pour que cette option ne soit plus sélectionnable .

(function () {
  window.onload= document.querySelector('[value="c0"]').setAttribute('disabled','disabled');  
})();

exemple, si j'ai compris la question et dans la limite des possibilité de styles : https://codepen.io/gc-nomade/pen/xxqGNyq

Cdt