28111 sujets

CSS et mise en forme, CSS3

Atteindre "label" lorsque "radio" "checked"

Bonjour à vous tous,

Je suis sous WorldPress, (CF7 multi-step). Donc pas trop accès au code généré...

J'ai ce code généré par WP:

<div class="radio-toolbar">
   <span class="wpcf7-form-control-wrap test">
     <span class="wpcf7-form-control wpcf7-radio">
       <span class="wpcf7-list-item first">
         <label>
           <input type="radio" name="test" value="Oui">
           <span class="wpcf7-list-item-label">Oui</span>
         </label>
       </span>
       <span class="wpcf7-list-item last">
         <label>
             <input type="radio" name="test" value="Non">
             <span class="wpcf7-list-item-label">Non</span>
        </label>
      </span>
    </span>
  </span>
</div>


J'aimerais que lorsque l'on clique sur le radio (Oui ou Non) Pouvoir lui passer des css.
Ainsi en faisant : 

.radio-toolbar input[type="radio"]:checked ~ * { 
   font-weight:bold;
   color: #000 !important;
}

J'arrive à modifier le CSS au "span" qui à la "class" : "wpcf7-list-item-label" (Ligne 7 & 13)

J'ai essayé : 

.radio-toolbar input[type="radio"]:checked + label {...}

Sans succès.

Et ceci fonctionne (mais en Hover) :

.radio-toolbar label:hover {...}

Lorsque l'on passe la souris dessus il y a bien les CSS qui sont passés.

J'ai trouvé plein de choses sur internet... Mais la je sais plus..
Si vous aviez une idée... MERCI ! Smiley smile
Modérateur
Acqua a écrit :
…
J'ai essayé : 

.radio-toolbar input[type="radio"]:checked + label {...}

Sans succès.
…


Hello,
Pas sur de voir la question, par contre ce n'est pas label mais span que tu devrais avoir à cet endroit Smiley smile
Modifié par Yordi (18 Jun 2020 - 14:51)
Yordi,
Merci de ta réponse.
Lorsque je fais :

.radio-toolbar input[type="radio"]:checked +span {...}

J'interviens sur le "text" (Oui ou Non).
Moi j'aimerai intervenir sur : 

.radio-toolbar label {
    display: inline-block;
    background-color: #fff;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 4px;
  color: #999;
  cursor: pointer;
}


Pour changer le fond, la couleur etc...
Merci
Modérateur
Ah ok ce n'était pas super clair pour moi…

Ce n'est donc pas possible de remontrer la hiérarchie en CSS. Par contre, si ce n'est qu'un fond, il y aura toujours moyen de contourner avec par exemple une position relative sur le label, un pseudo élément before sur le span, qui serait positionné en absolute (top: 0; right: 0; bottom: 0; left: 0;), et un z-index de -1…
Si des changements sur le texte, ça ira très bien sur le span.

Si c'est quelque chose d'encore plus fancy, alors il faudra Javascript pour gérer le survol et par exemple avoir une class qui sera appliquée au DOM temporairement lors du survol et supprimé par la suite.

Donc, encore au moins deux possibilités mais ça dépendra que ce que tu veux faire exactement Smiley smile
Yordi,
Merci et désolé de ne pas avoir été clair... Smiley decu

Je crois que je vais choisir le JS il y a beaucoup de "radio" dans ma page...

Je vais regarder de ce côté là.
Merci infiniment de ton aide.
c'est sûrement possible en css mais voilà la solution que j'ai trouvé en js :


    const radio = document.querySelectorAll('input[type="radio"]');
    for( i = 0; i < radio.length; i++ ) {
      radio[i].addEventListener('click', function(){
        if(this.checked == true) {
          this.parentNode.classList.add('active');
        } else {
          this.parentNode.classList.remove('active');
        }
      });
    }




    label.active {
      color: red;
    }


à savoir, le script tel qu'il est écrit ne fait pas la différence entre quel radio est coché.
Modifié par vzytoi (18 Jun 2020 - 16:21)
Sujet clos
Aller à