Comment changer la taille d'une case à cocher en HTML et CSS ?
Comment puis-je changer la taille d'une case à cocher en HTML et CSS ?
Les propriétés width et height permettent de modifier la taille d'une case à cocher sur la plupart des navigateurs, cependant certains d'entre eux comme Firefox n'interprètent pas correctement le changement de taille.
Pour cette raison vous devez utiliser la propriété CSS transform avec son argument scale ; cette méthode est compatible avec tous les navigateurs.
Vous devez spécifier un chiffre comme paramètre de l'argument scale ; il s'agit d'un coefficient multiplicateur qui sera appliqué à la taille par défaut de la case à cocher.
Dans l'exemple ci-après on crée une CLASS CSS avec la propriété CSS transform et l'argument scale avec un paramètre de 5 : la taille de la case à cocher est donc multipliée par 5.
Voici un exemple pour changer la taille d'une case à cocher HTML du type checkbox :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la taille d'une case à cocher en HTML et CSS ?</title>
<style>
input.grandeCheckbox {
transform : scale(5);
}
body {
text-align:center;
margin-top:50px;
}
</style>
</head>
<body>
<input type="checkbox" class="grandeCheckbox" checked>
</body>
</html>