Checkbox más grande en HTML y CSS

Checkbox más grande en HTML/CSS. En el caso de un checkbox, deseamos agrandarlo para que sea visible según lo que necesitemos. Sin embargo al tratar de agrandarlo, la casilla de verificación sigue en el mismo tamaño.

Porque cambiar el tamaño de un checkbox?

Podríamos decir que normalmente por requerimientos del diseño de la página web o proyecto web en la que se está trabajando, es requerido cambiar el tamaño de un checkbox, por ejemplo en ventas de facturación, ya que el estilo por defecto no es demasiado pequeño y para realizar las ventas necesitamos controles más grandes y la pregunta salta a la luz, como podemos agrandar el tamaño de los CHECKBOX?

Si buscas por internet, muchas soluciones aparecen utilizando el recurso JavaScript e incluso librerías para hacerlo, pero no tiene por qué ser tan complicado, esas librerías utilizan imágenes nuevas maquillando con css nuestros checkbox.

¿Cómo lo hago de manera eficiente?

Si es que utilizaron esta opción en estilos CSS verán que no funciona como lo hacían con los demás elementos de un formulario HTML, como lo es un input por ejemplo.

.check {
width:30px;
height:30px;
}

Checkbox más grande en HTML y CSS

La solución es la siguiente y sin imágenes ni muchos estilos, tampoco utilizaremos JavaScript para no cargar demasiado el servidor. Vamos a duplicar el tamaño de nuestros CHECKBOX.

1. Lado de estilos CSS

input[type=checkbox]
{
  /* Doble-tamaño Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari y Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

/* Tal vez desee envolver un espacio alrededor de su texto de casilla de verificación */
.checkboxtexto
{
  /* Checkbox texto */
  font-size: 110%;
  display: inline;
}

2. Lado formulario HTML

<input  type="checkbox" name="opciona" id="opta" checked />
<span class="checkboxtext">
  Opcion A
</span><br>
<input type="checkbox" name="opcionb" id="optb" />
<span class="checkboxtext">
  Opcion B
</span>

Aquí una solución más moderna para aplicar, reduciendo el código drasticamente.

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

De esta Manera observaran que sus etiquetas Checkbox tendrán el doble de tamaño.

Espero que les sirva este pequeño código.