La casilla de verificación es un elemento HTML que se utiliza para recibir información del usuario.
Método 1: el tamaño de la casilla de verificación se puede establecer utilizando la propiedad de alto y ancho. La propiedad de altura establece la altura de la casilla de verificación y la propiedad de ancho establece el ancho de la casilla de verificación.
Sintaxis:
input./*checkbox class name*/ {
width : /*desired width*/;
height : /*desired height*/;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Set checkbox size
</title>
<!-- Style to set the size of checkbox -->
<style>
input.largerCheckbox {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<input type="checkbox" class="defaultCheckbox"
name="checkBox1" checked>
<input type="checkbox" class="largerCheckbox"
name="checkBox2" checked>
</body>
</html>
Producción:
Nota: Esto funciona bien para Google Chrome, Microsoft Edge e Internet Explorer. En Mozilla Firefox, el área de la casilla de verificación en la que se puede hacer clic es la especificada, pero muestra una casilla de verificación del tamaño predeterminado.
Método 2: una solución alternativa que también funciona para Mozilla Firefox es usar la propiedad de transformación .
Sintaxis:
input./*checkbox class name*/ {
transform : scale(/*desired magnification*/);
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Set the size of checkbox
</title>
<!-- Use transform scale property to
set size of checkbox -->
<style>
input.largerCheckbox {
transform : scale(10);
}
body {
text-align:center;
margin-top:100px;
}
</style>
</head>
<body>
<input type="checkbox" class="largerCheckbox"
name="checkBox2" checked>
</body>
</html>
Salida:
Este método tiene algunos inconvenientes. La casilla de verificación debe colocarse con cuidado para mantenerla dentro de la ventana del navegador o evitar que se superponga con otros elementos. Además, en algunos navegadores, la casilla de verificación puede aparecer pixelada para tamaños más grandes.
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .