Comment puis-je styliser les boutons radio HTML en tant que cases à cocher pour les formulaires gouvernementaux imprimables ?

Style des boutons radio HTML pour ressembler aux cases à cocher des formulaires d'agence gouvernementale

Afin de créer un formulaire d'agence gouvernementale qui ressemble beaucoup à l'original, il Il est nécessaire de styliser les boutons radio de la version électronique pour qu'ils ressemblent à des cases à cocher à des fins d'impression. Alors qu'une approche traditionnelle impliquerait de créer une case à cocher distincte pour masquer chaque bouton radio et synchroniser leurs fonctionnalités, il existe une méthode plus efficace.

En utilisant la propriété d'apparence du CSS3 moderne, il est possible de modifier l'apparence des boutons radio pour imiter cases à cocher. Cette méthode est prise en charge dans les navigateurs populaires tels que Firefox, Chrome, Safari et Opera. En définissant les propriétés -webkit-looking et -moz-looking sur « checkbox », ces navigateurs afficheront des boutons radio avec des styles de case à cocher carrés.

Voici un exemple d'extrait de code :

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

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

Cette solution transforme efficacement les boutons radio en éléments ressemblant à des cases à cocher, améliorant ainsi la précision visuelle des formulaires imprimés et conservant la facilité d'utilisation avec les boutons radio sur le écran.

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!