la classe css de l'option est supprimée lorsque l'option est sélectionnée

Question

<select class="FunctieSelect">
<option class="yellow" value="-1">- kies -</option>
<option class="yellow" value="1">KSZ functie</option>
<option class="yellow" value="2">Bakker</option>
<option class="yellow" value="3">Schilder</option>
<option class="yellow" value="4">Andere</option>
</select>

avec

.yellow
{
    background-color: Yellow;
}

produit la sortie suivante :

En réalité, une seule des options aura un arrière-plan jaune, donc le réglage de la css sur la sélection ne m'aidera pas.

\=> Comment faire pour que l'option reste jaune lorsqu'elle est sélectionnée ?

Je sais qu'une solution possible est d'utiliser jquery pour créer un événement "change", vérifier dans l'événement de changement quelle option est sélectionnée, et ensuite définir le css de la sélection. Mais je me demande s'il n'y a pas une solution plus simple.

Answer 1

Malheureusement, ce que vous voyez est le comportement par défaut des widgets du navigateur, qui n'est pas remplacé par un CSS. Vous disposez de quelques options - peut-être quelque chose comme Apprivoiser la sélection sera utile ?

Answer 2

D'accord avec Andrew. Une autre chose à laquelle vous pourriez penser, cependant, est que la convivialité diminue lorsque vous modifiez les styles des éléments de formulaire. Si vous voulez indiquer une partie modifiée d'un formulaire, vous pouvez simplement mettre en évidence la case autour de la sélection.

Answer 3

Si vous voulez donner du style aux boîtes de sélection, je vous suggère de les remplacer par quelque chose comme JQuery Flexbox ( Démonstration ). Sinon, ils seront rendus de différentes manières selon les navigateurs et les plateformes.