Comment puis-je faire en sorte que les boutons radio ressemblent à des boutons en utilisant uniquement CSS ?

Faire en sorte que les boutons radio ressemblent à des boutons

L'incorporation de boutons radio dans un formulaire de don est courante, mais beaucoup préfèrent une apparence semblable à un bouton au lieu de les cadrans circulaires traditionnels. Pour y parvenir, CSS peut être utilisé efficacement, sans avoir besoin de bibliothèques HTML ou JavaScript supplémentaires.

Étape 1 : Structure HTML

Maintenir la structure HTML originale du boutons radio. Par exemple :

Étape 2 : Style CSS

À l'aide de CSS, personnalisez l'apparence :

/* Reset styles */
.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 label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

Explication :

• Réinitialisation des styles supprime le style par défaut du navigateur.
• Le repositionnement des éléments à l'aide du positionnement absolu permet au bouton radio de chevaucher l'étiquette.
• Masquer le bouton radio le rend invisible visuellement.
• La détection d'un état coché modifie la couleur de fond de l'état associé étiquette.
• Améliorations visuelles donnent l'apparence du bouton, y compris les effets de remplissage, de bordure et de survol.

Avec ces ajustements CSS, vos boutons radio prendront une apparence de bouton tout en conservant leur fonctionnalité et leur compatibilité avec les anciens navigateurs comme IE8.

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!