Portada » Pagina » Checkbox más grande en HTML y CSS

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.

Checkbox más grande en HTML y CSS
Checkbox más grande en HTML y CSS

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

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 3.7 / 5. Recuento de votos: 3

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

3 comentarios en “Checkbox más grande en HTML y CSS”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad