Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

CSS selon checked

1 view
Skip to first unread message

Stéphane Santon

unread,
Sep 21, 2012, 7:03:03 PM9/21/12
to
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">:-D 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">
</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


Stéphane Santon

unread,
Sep 21, 2012, 7:05:21 PM9/21/12
to
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 !

Stéphane Santon

unread,
Oct 8, 2012, 10:12:10 AM10/8/12
to
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 !

Olivier Miakinen

unread,
Oct 8, 2012, 10:54:58 AM10/8/12
to
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

unread,
Oct 8, 2012, 11:21:40 AM10/8/12
to
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
0 new messages