web-dev-qa-db-fra.com

Élément <select> de style basé sur <option> sélectionnée

Est-il possible de styliser un élément select en fonction de ce que option est sélectionné avec CSS uniquement? Je connais l'existence solutions JavaScript .

J'ai essayé de styliser l'élément option lui-même, mais cela ne donnera de style qu'à l'élément option dans la liste des options, pas à l'élément sélectionné.

select[name="qa_contact"] option[value="3"] {
    background: orange;
}

http://jsfiddle.net/Aprillion/xSbhQ/

Si cela n'est pas possible avec CSS 3, Sélecteur de sujet CSS 4 aidera-t-il à l'avenir - ou cela restera-t-il un fruit interdit pour CSS?

cssparent-child
38
Aprillion

Malheureusement, oui - ce n'est actuellement pas possible avec seulement CSS. Comme mentionné dans les réponses et commentaires à cette question , il n'existe actuellement aucun moyen de faire en sorte que l'élément parent reçoive un style basé sur ses enfants.

Pour faire ce que vous voulez, vous devez essentiellement détecter lequel des enfants (<option>) est sélectionné, puis stylisez le parent en conséquence.

Vous pouvez cependant accomplir cela avec un appel jQuery très simple, comme suit:

[~ # ~] html [~ # ~] 

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery 

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

[~ # ~] css [~ # ~] 

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

Voici un jsFiddle de travail .

Retour à la question sur l'avenir des sélecteurs. Oui - les sélecteurs "Sujet" sont destinés à faire exactement ce que vous mentionnez. Si/quand ils sont réellement mis en ligne dans des navigateurs modernes, vous pouvez adapter le code ci-dessus pour:

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

En guise de note secondaire, il y a toujours un débat pour savoir si le ! devrait aller avant ou après le sujet. Ceci est basé sur la norme de programmation de !something signifiant "pas quelque chose". En conséquence, le CSS basé sur le sujet pourrait en fait ressembler à ceci:

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }
35
Troy Alford

Voici donc ce que j'ai trouvé là-dessus étant possible . Le plus gros problème est qu'après avoir sélectionné un élément, la couleur d'arrière-plan ne change pas car l'élément de sélection n'est pas réellement redessiné (semble plus répandu dans IE - allez figure). Donc même même si vous sélectionnez une option différente, cette option n'est pas mise en surbrillance dans la liste lorsque vous cliquez à nouveau sur l'élément de sélection.

Pour résoudre les problèmes de redessinage dans IE, il fallait changer le font-size d'un montant minimal, + -. 1. L'autre chose, qui ne semble pas bien documentée, est que la pseudo-classe :checked fonctionne également sur certains contrôles.

Le violoneux pour afficher le CSS ajouté qui le rend possible.

Je n'ai joué que brièvement avec lui sur Chrome et IE9, fyi.

EDIT: De toute évidence, vous devrez définir la [valeur = "x"] à la valeur souhaitée pour la mise en évidence d'une option spécifique.

2
Justin