Cases à cocher dans les pages Web - comment les agrandir?

Question

Les cases à cocher standard affichées dans la plupart des navigateurs sont assez petites et leur taille n'augmente pas, même lorsqu'une police plus grande est utilisée. Quel est le meilleur moyen, indépendant du navigateur, d’afficher des cases à cocher plus grandes?

Answer 1

Si cela peut aider quelqu'un, voici un simple CSS comme point de départ. Le transforme en un carré arrondi de base assez grand pour les pouces avec une couleur de fond inversée.

 input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}
 

Answer 2

En fait, il existe un moyen de les agrandir, des cases à cocher comme n'importe quoi d'autre (même un iframe comme un bouton facebook).

Enveloppez-les dans un élément "zoomé":

 .double {
  zoom:2;
  transform:scale(2);
  -ms-transform:scale(2);
  -webkit-transform:scale(2);
  -o-transform:scale(2);
  -moz-transform:scale(2);
  transform-origin:0 0;
  -ms-transform-origin:0 0;
  -webkit-transform-origin:0 0;
  -o-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -webkit-transform-origin:0 0;
}

<div class=double>
  <input type=checkbox name=hello value=1>
</div>
 

Cela peut sembler un peu "redimensionné" mais cela fonctionne.

Bien sûr, vous pouvez faire div flottant: à gauche et mettre votre étiquette à côté, flotteur: à gauche aussi.

Answer 3

Essayez ce CSS

 input[type=checkbox] {width:100px; height:100px;}
 

Answer 4

Techniques de remplacement d'image

Archive.org miroir

Answer 5

La modification de la taille de la case à cocher à l'aide de CSS génère des résultats incohérents sur les navigateurs et les systèmes d'exploitation. Vous ne pouvez pas vraiment l'agrandir.

Vous pouvez cependant les modifier: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/