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">

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

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!