CSS selon checked

Le
Stéphane Santon
Bonjour,

J'ai cette structure html :

<div class="choix choix_4">
<input id="champ_radio_2_1" class="radio" type="radio" value="4"
name="radio_2">
<label for="champ_radio_2_1"> Très satisfait</label>
</div>

<div class="choix choix_3">
<input id="champ_radio_2_2" class="radio" type="radio" value="3"
checked="checked" name="radio_2">
<label for="champ_radio_2_2">:-) Plutôt satisfait</label>
</div>

Et en CSS :
.choix_4 input[checked=checked] + label {
background-color: #0f0;
}
.choix_3 input[checked=checked] + label {
background-color: #0ff;
}

Donc à l'affichage, j'ai bien le deuxième label en fond cyan car
l'input qui le précède est en checked=checked.
Mais si je clique sur le premier choix (choix_4), c'est le code html du
choix_3 qui le conserve checked, donc choix_4 ne passe pas au vert.

Comment faire en CSS ?

Sinon en JS ?

Merci

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Stéphane Santon
Le #24849592
Bonjour,

Grâce à
http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre,

la solution ne passe par input[checked=checked]

.choix_4 input[checked=checked] + label {
background-color: #0f0;
}

mais par la pseudo-classe ':checked' :

div.choix_4 input[type=radio]:checked + label {
background-color: #0f0;
}

Ainsi quand je coche un bouton radio, le label correspondant passe en
couleur.

Stéphane Santon a écrit :
J'ai cette structure html :

<div class="choix choix_4">
<input id="champ_radio_2_1" class="radio" type="radio" value="4"
name="radio_2">
<label for="champ_radio_2_1"> Très satisfait</label>
</div>

<div class="choix choix_3">
<input id="champ_radio_2_2" class="radio" type="radio" value="3"
checked="checked" name="radio_2">
<label for="champ_radio_2_2">:-) Plutôt satisfait</label>
</div>

Et en CSS :
.choix_4 input[checked=checked] + label {
background-color: #0f0;
}
.choix_3 input[checked=checked] + label {
background-color: #0ff;
}

Donc à l'affichage, j'ai bien le deuxième label en fond cyan car l'input qui
le précède est en checked=checked.
Mais si je clique sur le premier choix (choix_4), c'est le code html du
choix_3 qui le conserve checked, donc choix_4 ne passe pas au vert.

Comment faire en CSS ?



--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu
Olivier Miakinen
Le #24849722
Le 08/10/2012 16:12, Stéphane Santon a écrit :

Grâce à
http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre,

la solution ne passe par input[checked=checked]

.choix_4 input[checked=checked] + label {
background-color: #0f0;
}

mais par la pseudo-classe ':checked' :

div.choix_4 input[type=radio]:checked + label {
background-color: #0f0;
}



Merci du retour ! J'avoue à ma grande honte qu'il m'avait semblé
que ce genre de chose devait exister, mais que je n'étais pas
allé vérifier dans la norme.

Plus exactement, j'avais vérifié que ça n'existait pas en CSS 2.1 :
http://www.w3.org/TR/CSS21/selector.html#pseudo-element-selectors

En revanche cela existe bien en CSS 3 :
http://www.w3.org/TR/css3-selectors/#checked

Cordialement,
--
Olivier Miakinen
Stéphane Santon
Le #24849892
Olivier Miakinen a écrit :
Merci du retour ! J'avoue à ma grande honte qu'il m'avait semblé
que ce genre de chose devait exister, mais que je n'étais pas
allé vérifier dans la norme.



Je te pardonne mon frère... ;-)

On vient de me souffler ce lien aussi sur le sujet :
http://www.thecssninja.com/css/custom-inputs-using-css

--
Stéphane

Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !

BTS Electrotechnique *** http://enselec.santonum.eu
Publicité
Poster une réponse
Anonyme