Comment puis-je styliser les étiquettes des boutons radio sélectionnés en CSS ?

Style des étiquettes de boutons radio sélectionnés

En CSS, lors du style d'une étiquette de bouton radio sélectionnée, il est important de garantir un ciblage et une spécificité appropriés. Pour y parvenir, suivez ces étapes :

1. Masquer l'élément d'entrée :
Utiliser l'affichage : aucun ; pour masquer l’élément radio d’entrée. Cela permet de se concentrer sur l'étiquette associée.

2. Étiquette de style :
Définissez le style de l'étiquette, y compris la couleur d'arrière-plan, la bordure et le remplissage. Utilisez inline-block pour permettre aux étiquettes de s'asseoir côte à côte.

3. Cibler les boutons radio cochés :
Pour styliser l'étiquette d'un bouton radio sélectionné, utilisez la pseudo-classe :checked pour cibler l'étiquette adjacente :

.radio-toolbar input[type="radio"]:checked + label {
  /* Styling for selected labels */
}

Exemple :

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  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 suivant ces étapes, vous pouvez styliser efficacement les étiquettes des boutons radio sélectionnés, en vous assurant qu'ils se démarquent et améliorent le expérience utilisateur.