Comment puis-je styliser les boutons radio pour qu'ils ressemblent à des boutons en utilisant uniquement CSS ?

Remplacement des boutons radio par des éléments de type bouton

Les boutons radio sont couramment utilisés dans les formulaires pour la sélection des utilisateurs. Cependant, personnaliser leur apparence pour imiter les boutons normaux peut améliorer l'interface utilisateur.

Utiliser CSS pour transformer les boutons radio

Vous pouvez réaliser cette transformation uniquement avec CSS, en éliminant le besoin de cadres externes. La structure HTML mise à jour reste inchangée, préservant sa fonctionnalité.

Marquage HTML

Le code HTML du formulaire de don reste le même, composé de :

• Un
  liste des options des boutons radio
  • éléments contenant des boutons radio et leurs étiquettes

  Style CSS

  Le code CSS suivant transformera les boutons radio en éléments de type bouton :

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

  Comment ça marche

  • Il positionne à la fois le bouton radio et les éléments d'étiquette absolument à l'intérieur le
  • éléments.
  • L'opacité du bouton radio est définie sur 0,01, ce qui le rend visuellement masqué.
  • Lorsqu'un bouton radio est coché, son étiquette liée est surlignée avec un fond jaune.
  • L'effet de survol sur les étiquettes est conservé.

  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!