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

Les cases à cocher standard affichées dans la plupart des navigateurs sont assez petites et n'augmentent pas en taille même lorsqu'une police plus grande est utilisée. Quelle est la meilleure façon, indépendante du navigateur, d'afficher des cases à cocher plus grandes?

Au cas où cela peut aider n'importe qui, 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 d'arrière-plan basculé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;
}

<input type="checkbox" />

En fait, il existe un moyen de les agrandir, des cases à cocher comme toute autre chose (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;
}

<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 en sorte que ce div float: left et mettre votre étiquette à côté, float: left aussi.

Essayez ce CSS

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

J'ai essayé de changer le paddinget marginet ainsi que le widthet height, puis j'ai finalement trouvé que si vous augmentez simplement l'échelle, cela fonctionnera:

input[type=checkbox] {
    transform: scale(1.5);
}

Voici une astuce qui fonctionne dans les navigateurs les plus récents (IE9 +) en tant que solution CSS uniquement qui peut être améliorée avec javascript pour prendre en charge IE8 et les versions antérieures.

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

Donnez au style ce labelà quoi vous voulez que la case à cocher ressemble

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

Pour javascript, vous pourrez ajouter des classes à l'étiquette pour afficher l'état. De plus, il serait judicieux d'utiliser la fonction suivante:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

MODIFIER pour modifier les #checkboxIDstyles

J'écris une application phonegap et les cases à cocher varient en taille, en apparence, etc. J'ai donc créé ma propre case à cocher simple:

D'abord le code HTML:

<span role="checkbox"/>

Puis le CSS:

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

Pour activer l'état de la case à cocher, j'ai utilisé JQuery:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

Mais cela peut facilement se faire sans cela ...

J'espère que cela peut vous aider!

Décision pure et moderne du CSS 2020 , sans mise à l'échelle floue ni transformation non pratique. Et avec tick! =)

Fonctionne bien dans les navigateurs Firefox et Chromium.

Ainsi, vous pouvez définir vos cases à cocher de manière purement ADAPTIVE , simplement en définissant des blocs parents font-heightet cela augmentera avec le texte!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}

<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>