Comment puis-je styliser les boutons radio HTML pour qu'ils ressemblent à des cases à cocher lors de l'impression ?

Style des boutons radio HTML sous forme de cases à cocher

Problème :
Les utilisateurs exigent que les formulaires imprimés ressemblent aux documents officiels du gouvernement , y compris des boutons radio conçus comme des cases à cocher carrées. Malgré l'affichage des boutons radio à l'écran, la version imprimée doit refléter le style de la case à cocher.

Solution :

Navigateurs modernes comme Firefox 1 , Chrome 1 , Safari 3 , et Opera 15 prennent en charge la propriété d'apparence, qui permet de styliser les boutons radio pour imiter les cases à cocher. Voici comment y parvenir :

input[type="radio"] {
  appearance: checkbox;
}

Ce code applique l'apparence de la case à cocher à tous les boutons radio. Le résultat dans les navigateurs pris en charge sera :

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

En utilisant la propriété d'apparence, il est possible de styliser les boutons radio sous forme de cases à cocher tout en évitant la complexité de la création et de la synchronisation des cases à cocher fantômes à l'aide de JavaScript et CSS.

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!