Comment puis-je styliser les boutons radio pour qu'ils ressemblent à des boutons en utilisant uniquement CSS et maintenir la compatibilité IE8 ?

Personnalisation de l'apparence des boutons radio : les faire ressembler à des boutons

Problème :

Vous visez pour créer des boutons radio sur un formulaire de don qui ressemblent à des boutons plutôt qu'aux cadrans circulaires typiques. De plus, cette fonctionnalité doit fonctionner de manière transparente dans IE8.

Solution :

En utilisant CSS, il est possible d'obtenir le résultat souhaité sans recourir à des frameworks externes ou à des modifications HTML importantes. .

Structure HTML :

La structure HTML reste en grande partie inchangée, en utilisant une liste (ul) pour les boutons radio.

Style CSS :

• Masquer le bouton radio par défaut en utilisant l'opacité : 0,01.
• Positionnez l'élément d'entrée de manière absolue, en l'alignant avec l'étiquette au-dessus.
• Définissez l'étiquette comme élément de bloc et positionnez-le absolument pour couvrir toute la zone du bouton. Utilisez le curseur : pointeur pour l'interactivité.
• Lorsqu'un bouton radio est coché, utilisez CSS pour appliquer une couleur d'arrière-plan à l'étiquette correspondante, en imitant un effet de clic sur un bouton.

Exemple de code :

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

Exemple Utilisation :

<ul class="donate-now">
  <li>
    <input type="radio">

Cette approche vous permet de personnaliser efficacement l'apparence des boutons radio, en les faisant ressembler à des boutons sans compromettre la fonctionnalité.

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!