Comment styliser l'étiquette d'un bouton radio sélectionné en CSS ?

Comment styliser l'étiquette d'un bouton radio sélectionné en CSS

Les boutons radio fournissent un élément d'interaction unique dans les interfaces Web, permettant aux utilisateurs d'en sélectionner un option d'un groupe. Pour améliorer leur attrait visuel, il est souvent souhaitable de styliser l'étiquette associée au bouton radio sélectionné.

Le problème :

Vous avez rencontré un défi en essayant de appliquer des styles à l'étiquette d'un bouton radio sélectionné à l'aide de CSS. Votre extrait de code actuel comprend les éléments suivants :

.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

Identification du problème :

Ce sélecteur CSS ne fonctionne pas car le sélecteur frère adjacent " " correspond uniquement au première instance de l'élément qui le suit. Cependant, dans votre code HTML, vos étiquettes ne sont pas immédiatement adjacentes aux éléments d'entrée.

La solution :

Pour styliser l'étiquette d'un bouton radio sélectionné, le Le sélecteur CSS doit cibler spécifiquement l'élément label associé à l'entrée cochée. Ceci peut être réalisé en utilisant l'attribut 'for' dans l'étiquette et l'attribut 'id' dans l'élément d'entrée respectif, comme démontré dans le code suivant :

<div class="radio-toolbar">
  <input type="radio">

.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;
}

En ajustant le sélecteur CSS, le le code cible désormais correctement les étiquettes des boutons radio sélectionnés et applique le style souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!