Comment puis-je remplacer les boutons radio par des images en utilisant HTML et CSS ?

Boutons radio avec espaces réservés pour les images

Pour remplacer les boutons radio par des images, procédez comme suit :

1. Envelopper le bouton radio et l'image dans  : Placez le bouton radio et l'image correspondante dans un <étiquette> élément pour les associer.
2. Masquer le bouton radio : Pour supprimer l'apparence du bouton radio, définissez sa position sur absolue, son opacité sur 0, ainsi que sa largeur et sa hauteur sur 0.
3. Image cible avec le sélecteur de frère : Utilisez le sélecteur de frère adjacent ( ) pour cibler l'image à côté de la radio cachée bouton.
4. Style des images cochées : Appliquez des styles à l'image adjacente au bouton radio coché, comme un contour ou un changement de couleur.
5. Fournissez Alt Texte : Assurez-vous que l'image a un attribut alt à des fins d'accessibilité, car elle servira de bouton radio label.

Voici un exemple de code CSS et HTML qui illustre cette solution :

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

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!