Caselle di controllo nelle pagine web: come ingrandirle?

Le caselle di controllo standard visualizzate nella maggior parte dei browser sono piuttosto piccole e non aumentano di dimensione anche quando viene utilizzato un carattere più grande. Qual è il modo migliore e indipendente dal browser per visualizzare caselle di controllo più grandi?

Nel caso in cui questo possa aiutare qualcuno, ecco un semplice CSS come punto di partenza. Lo trasforma in un quadrato arrotondato di base abbastanza grande per i pollici con un colore di sfondo alternato.

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" />

In realtà c'è un modo per ingrandirle, caselle di controllo come qualsiasi altra cosa (anche un iframe come un pulsante Facebook).

Avvolgili in un elemento "ingrandito":

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

Potrebbe sembrare un po '"ridimensionato" ma funziona.

Ovviamente puoi fare in modo che div float: left e aggiungere la tua etichetta, float: left.

Prova questo CSS

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

Ho provato a cambiare paddinge margine così come widthe height, e alla fine ho scoperto che se aumenti solo la scala funzionerà:

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

Ecco un trucco che funziona nei browser più recenti (IE9 +) come una soluzione solo CSS che può essere migliorata con javascript per supportare IE8 e versioni precedenti.

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

Definisci lo stile labelcon cui vuoi che appaia la casella di controllo

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

Per javascript, sarai in grado di aggiungere classi all'etichetta per mostrare lo stato. Inoltre, sarebbe saggio utilizzare la seguente funzione:

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

MODIFICA per modificare gli #checkboxIDstili

Sto scrivendo un'app per phonegap e le caselle di controllo variano in dimensioni, aspetto, ecc. Quindi ho creato la mia semplice casella di controllo:

Prima il codice HTML:

<span role="checkbox"/>

Quindi il 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);
}

Per attivare o disattivare lo stato della casella di controllo, ho usato JQuery:

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

Ma può essere fatto facilmente senza di essa ...

Spero possa aiutare!

Decisione solo CSS 2020 moderna e pura , senza ridimensionamento sfocato o trasformazioni inutili. E con il segno di spunta! =)

Funziona bene con Firefox e browser basati su Chromium.

Quindi, puoi regolare le tue caselle di controllo puramente ADAPTIVE , semplicemente impostando il blocco genitore font-heighte crescerà con il testo!

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>