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.
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>