Casillas de verificación en páginas web: ¿cómo agrandarlas?

Las casillas de verificación estándar representadas en la mayoría de los navegadores son bastante pequeñas y no aumentan de tamaño incluso cuando se usa una fuente más grande. ¿Cuál es la mejor forma, independiente del navegador, de mostrar casillas de verificación más grandes?

En caso de que esto pueda ayudar a alguien, aquí tiene CSS simple como punto de partida. Lo convierte en un cuadrado redondeado básico lo suficientemente grande para los pulgares con un color de fondo alternado.

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 realidad, hay una forma de hacerlos más grandes, casillas de verificación como cualquier otra cosa (incluso un iframe como un botón de Facebook).

Envuélvalos en un elemento "ampliado":

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

Puede parecer un poco "reescalado", pero funciona.

Por supuesto, puede hacer que ese div flote: a la izquierda y ponga su etiqueta al lado, flotar: a la izquierda también.

Prueba este CSS

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

Intenté cambiar el paddingy marginy así como el widthy height, y finalmente descubrí que si solo aumentas la escala, funcionará:

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

Aquí hay un truco que funciona en los navegadores más recientes (IE9 +) como una solución única de CSS que se puede mejorar con javascript para admitir IE8 y versiones anteriores.

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

Diseñe el estilo labelcon el aspecto que desea que tenga la casilla de verificación

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

Para javascript, podrá agregar clases a la etiqueta para mostrar el estado. Además, sería aconsejable utilizar la siguiente función:

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

EDITAR para modificar #checkboxIDestilos

Estoy escribiendo una aplicación phonegap y las casillas de verificación varían en tamaño, apariencia, etc. Así que hice mi propia casilla de verificación simple:

Primero el código HTML:

<span role="checkbox"/>

Entonces el 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);
}

Para alternar el estado de la casilla de verificación, usé JQuery:

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

Pero se puede hacer fácilmente sin él ...

¡Espero que pueda ayudar!

Pura y moderna decisión de CSS 2020 , sin escalas borrosas o transformaciones no útiles ¡Y con tic! =)

Funciona bien en navegadores basados ​​en Firefox y Chromium.

Por lo tanto, puede controlar sus casillas de verificación de forma puramente ADAPTATIVA , simplemente configurando el bloque principal font-heighty ¡crecerá con el texto!

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>