Maison > interface Web > tutoriel CSS > Comment styliser l'étiquette d'un bouton radio sélectionné en CSS ?

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

Barbara Streisand
Libérer: 2024-12-16 03:53:12
original
903 Les gens l'ont consulté

How to Style the Label of a Selected Radio Button in 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;
}
Copier après la connexion

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">
Copier après la connexion
.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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal