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 n'augmentent pas en taille, même lorsqu'une police plus grande est utilisée. Quelle est la meilleure façon, indépendamment du navigateur, d'afficher des cases plus grandes?

Answer 1

Dans le cas où cela peut aider quelqu'un, voici CSS simple comme point de départ. Le transforme en un carré arrondi de base assez grand pour les pouces avec une couleur de fond 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; 
} 

Answer 2

Essayez cette CSS

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

Answer 3

Modification de la taille de la case à cocher en utilisant CSS produit des résultats incohérents entre les différents navigateurs et systèmes d'exploitation. Vous ne pouvez pas vraiment le rendre plus grand.

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

Answer 4

Voici une astuce qui fonctionne dans la plupart des navigateurs récents (IE9 +) en tant que CSS seule solution qui peut être amélioré avec le javascript pour soutenir IE8 et au-dessous.

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

style du label avec ce que vous voulez que la case à cocher pour ressembler

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

Pour javascript, vous serez en mesure d'ajouter des classes à l'étiquette pour montrer 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 les styles

Answer 5

#checkboxID Je suis writtinga application PhoneGap et cases à cocher sont de taille variable, regardez, etc. donc j'ai fait mon propre simple case à cocher:

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 de case à cocher, je JQuery:

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

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

Je espère que ça peut aider!

Answer 6

En fait, il est un moyen de les rendre plus gros, des cases à cocher comme tout le reste (même un iframe comme un bouton facebook).

les envelopper dans un « zoomée » élément:

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

Il peut sembler un peu « redimensionné », mais cela fonctionne.

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