Les boutons radio de style CSS peuvent-ils ressembler à des cases à cocher pour l'impression ?

Style des boutons radio comme des cases à cocher pour l'impression

Les boutons radio peuvent-ils être stylés pour ressembler à des cases à cocher à des fins d'impression, sans recourir à du JavaScript plus complexe ? des solutions basées ? La réponse réside dans l'utilisation de la propriété d'apparence CSS3.

Trois ans après la publication initiale de cette question, cet exploit est désormais possible dans les navigateurs modernes. En tirant parti de la propriété d'apparence, vous pouvez créer des éléments radio qui imitent visuellement les cases à cocher, comme le montre l'exemple ci-dessous :

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 offre une approche simple mais efficace pour garantir que les boutons radio s'affichent comme cases à cocher une fois imprimées, conservant l'illusion d'un formulaire officiel tout en simplifiant le développement.

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!