Des cases à cocher dans les pages web – comment le rendre plus grand?

La norme cases rendus dans la plupart des navigateurs sont assez petites et ne pas augmenter la taille, même si une plus grande police de caractères utilisée. Quel est le meilleur navigateur manière indépendante pour afficher de grandes cases?

InformationsquelleAutor Tony the Pony | 2010-11-09
  1. 118

    Dans le cas où cela peut aider quelqu'un, voici CSS simple comme un point de départ. Il se transforme en une base arrondie carré assez grand pour les pouces avec une bascule couleur d'arrière-plan.

    CSS:

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

    HTML:

    <input type="checkbox" />

    • Nice - Mais Chorme/Safari ne est - ce pas?
    • C'est le droit. Utilisez simplement l'équivalent pour les autres
    • Sauf pour IE (aussi IE 11) caniuse.com/#search=Appearance - mais qui a bien fonctionné pour les autres navigateurs. Merci!
    • Hmm, bizarre. Semble fonctionner pour moi!
    • ce serait bien si il y avait une tique à l'intérieur aussi 🙂
    • wow, merci pour le partage
    • Merci pour le partage. Je me demandais comment vous traitez avec la case présentation. Avec l'arrière-plan venez de définir une couleur, le blanc coche dans la case n'est plus visible. Est-il une solution simple? J'ai essayé d'ajouter une entité html pour la vérifier en un :avant, mais vous vous demandez si il y a une alternative
    • J'ai utilisé une couleur plus foncée pour le vérifié la couleur de fond et c'est pas si mal sans un "check"

    InformationsquelleAutor Paul
  2. 37

    Fait il y a un moyen de les rendre plus gros, cases à cocher, tout comme toute autre chose (même une iframe comme un facebook bouton).

    De les encapsuler dans un "zoom" de l'élément:

    CSS:

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

    HTML:

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

    Il peut paraître un peu "normalisée", mais il fonctionne.

    Bien sûr, vous pouvez faire le div en float:left et de mettre votre étiquette en dehors de cela, float:left trop.

    • Fonctionne très bien - mais pas sur IE8 - IE9+ fonctionne 😉
    • Notez que sur Firefox (à partir de la version 36), il en résultera un très floue apparence. Elle s'adapte bien dans Chrome, cependant. Démo: jsfiddle.net/tzp858j3
    • il n'y a pas de meilleure solution qui ne regarde PAS à l'échelle?
    • Ne peut pas zoom: 2 et transform: scale(2) être appliqué directement à la case? Pourquoi est-il besoin d'un conteneur?
    InformationsquelleAutor FlorianB
  3. 26

    Essayer cette CSS

    input[type=checkbox] {width:100px; height:100px;}
    • Pas totalement cross-browser (il est préférable de définir une classe en HTML et utiliser le sélecteur de classe dans le CSS), mais c'est peut-être une meilleure solution que la mienne. +1
    • Notez que cela rend floue la recherche des contrôles dans certains navigateurs, le natif de contrôle de mise à l'échelle est une image de taille fixe.
    • J'ai été en utilisant la largeur et la hauteur pour les fins de l'exemple. Probablement une combinaison de Harmen et ma solution est la voie à suivre si vous avez besoin de plus de style que les CSS peuvent raisonnablement fournir.
    • Génial ça marche!
    • Cela ne fonctionnera que dans certains navigateurs, et pas dans de nombreuses modernes.
    • Cela fonctionne sur safari ipad, où les cases à cocher doivent souvent être plus grande pour la rendre plus facile pour les utilisateurs à cliquer.
    • travaille dans IE11, chrome 36 et Safari iPad 7 (iOS 7.1)
    • Limitation majeure est qu'il ne fonctionne pas dans Firefox (comme de Firefox 36) et en fait l'air tout à fait contre nature (la case est de taille ordinaire, mais rembourrage autour d'elle remplit l'100 x 100px de la zone.
    • Je vous ai donné un downvote - cette réponse ne fonctionne pas dans Chrome.

    InformationsquelleAutor Collin White
  4. 1

    Voici une astuce qui fonctionne dans la plupart des navigateurs récents (IE9+) en CSS seule solution qui peut être améliorée avec javascript à l'appui de IE8 et ci-dessous.

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

    Style de la label avec ce que vous voulez la case à ressembler à

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

    Pour javascript, vous serez capable d'ajouter des classes de l'étiquette pour afficher l'état. Aussi, il serait sage d'utiliser la fonction suivante:

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

    Modifier pour modifier #checkboxID styles

    InformationsquelleAutor zzzzBov
  5. 0

    Je suis writtinga app phonegap, et les cases varient en taille, apparence, etc.
    J'ai donc 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);
}

    À bascule case à cocher état, j'ai utilisé JQuery:

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

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

    Espère que cela peut aider!

    InformationsquelleAutor wesamot