Comment puis-je redimensionner les cases à cocher de manière cohérente dans différents navigateurs à l'aide de CSS ?

Personnalisation de la taille d'une case à cocher avec CSS

Modifier la taille d'une case à cocher peut être difficile, en particulier lors d'une tentative de compatibilité entre navigateurs. Bien que les techniques de style telles que la largeur et la taille fonctionnent dans Internet Explorer 6 et versions ultérieures, elles restent inefficaces dans Firefox, où la case à cocher persiste à sa taille par défaut 16x16.

Une solution CSS pour le redimensionnement multi-navigateurs

Bien qu'elle ne soit pas esthétique, l'approche CSS suivante permet de personnaliser la taille des cases à cocher dans la plupart des systèmes modernes. navigateurs :

input[type=checkbox] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext {
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

Implémentation HTML

Dans votre code HTML, joignez les options de votre case à cocher dans les classes fournies pour appliquer le redimensionnement :

<input type="checkbox" name="optiona">

Remarque : La mise à l’échelle peut entraîner des imperfections visuelles. Cependant, cette solution adapte efficacement la taille des cases à cocher sur plusieurs navigateurs, y compris Firefox.

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!