web-dev-qa-db-fra.com

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

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

htmlcsscheckbox
100
Tony the Pony

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;
}
<input type="checkbox" />
120
Paul

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

42
FlorianB

Essayez ce CSS

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

Voici une astuce qui fonctionne dans la plupart des navigateurs récents (IE9 +) en tant que solution uniquement CSS pouvant ê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>

Style du label avec ce que vous voulez la case à cocher

#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. En outre, il serait sage d'utiliser la fonction suivante:

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

EDIT pour modifier #checkboxID modes

1
zzzzBov

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 basculer l'état des cases à cocher, j'ai utilisé JQuery:

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

Mais cela peut facilement être fait sans elle ...

J'espère que ça peut aider!

0
wesamot