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

Voici une solution accessible

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

  Tous
  Ouvert
  Archivé

Answer 2

Juste pour les développeurs super progressistes (note: :has est encore peu pris en charge!)

/* le sélecteur ne sélectionne que les libellés qui contiennent une entrée cochée à l'intérieur */
label:has(input:checked) {
  color: #f00;
}

    Test

    Test

    Test

Answer 3

Comme il n'existe actuellement aucune solution CSS pour styliser un parent, j'utilise une solution jQuery simple ici pour ajouter une classe à une balise label contenant une entrée cochée à l'intérieur.

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

N'oubliez pas de donner à la balise de l'entrée pré-cochée la classe checkedlabel également

Answer 4

Comme TimStieffenhofer l'a mentionné dans leur réponse, la méthode la plus simple est d'avoir le champ d'entrée en tant qu'enfant de l'étiquette et d'utiliser la pseudo-classe :focus-within sur l'étiquette.

Si vous souhaitez masquer votre bouton radio et définir l'entrée comme masquée ou cachée, cela ne fonctionnera plus. La solution de contournement consiste à donner au champ d'entrée un z-index de -1 (ou tout z-index inférieur à celui de l'étiquette parente).

Answer 5

Comme déjà expliqué par d'autres contributeurs, la meilleure solution de contournement consiste à masquer la case à cocher/le bouton radio et à styliser l'étiquette associée.

Voici ma contribution pour fournir des classes CSS pour le faire de manière générique pour les boutons radio : https://github.com/applicius/yacsscomp/blob/master/README.md#stylable-radio-button