CSS - Comment styler l'étiquette des boutons radio sélectionnés ?

Question

Je veux ajouter un style à l'étiquette sélectionnée d'un bouton radio :

HTML:

 Tout
 Ouvrir
 Archivé

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

Des idées sur ce que je fais mal ?

Answer 1

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

  Tout

  Ouvrir

  Archivé

Tout d'abord, vous voulez probablement ajouter l'attribut name sur les boutons radio. Sinon, ils ne font pas partie du même groupe et plusieurs boutons radio peuvent être cochés.

Aussi, comme j'ai placé les libellés en tant que frères (des boutons radio), j'ai dû utiliser les attributs id et for pour les associer ensemble.

Answer 2

Si vous voulez vraiment mettre les cases à cocher à l'intérieur de l'étiquette, essayez d'ajouter une balise span supplémentaire, par exemple :

HTML

 Tous
 Ouvert
 Archivé

CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:rose !important;
}

Cela définira les arrière-plans pour tous les frères du bouton radio sélectionné.

Answer 3

Vous utilisez un sélecteur de frère adjacent (+) alors que les éléments ne sont pas frères. Le label est le parent de l'input, pas son frère.

Le CSS n'a pas de moyen de sélectionner un élément en fonction de ses descendants (ni de tout ce qui suit).

Vous devrez vous tourner vers JavaScript pour résoudre cela.

Alternativement, réorganisez votre balisage :

...

Answer 4

Vous pouvez ajouter un span à votre code HTML et CSS.

Voici un exemple de mon code ...

HTML (JSX):

 am  

 pm  

CSS pour faire disparaître le bouton radio standard à l'écran et superposer une image de bouton personnalisée :

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;
    cursor:pointer;
    border-radius: 20%;
}

input[type="radio"] + label span {
    background-color: #FFFFFF 
}

input[type="radio"]:checked + label span{
     background-color: #660006;  
}

Answer 5

Il suffit d'utiliser label:focus-within {} pour styler une balise label avec une case à cocher ou une radio bouton cochée.