Tamaño de la casilla de verificación CSS

En este artículo, discutiremos las propiedades de CSS para aumentar el tamaño de una casilla de verificación. La casilla de verificación predeterminada en el lenguaje de marcado de hipertexto es pequeña y a veces puede ser difícil de ubicar en la página web. Discutiremos la altura, el ancho y la transformación de propiedades comúnmente utilizadas de CSS. Implementaremos varios ejemplos relacionados con este fenómeno en el entorno del bloc de notas ++.

Ejemplo 01: Aumento del tamaño de una casilla de verificación predeterminada utilizando propiedades de altura y ancho a través de la etiqueta de estilo CSS

En este ejemplo, aumentaremos el tamaño de una casilla de verificación predeterminada que proporciona el lenguaje de marcado de hipertexto. La técnica de etiqueta de estilo CSS se utilizará en este ejemplo para darle a la casilla de verificación un tamaño diferente. Ambas propiedades de cambio de tamaño se agregarán a una clase de estilo para la casilla de verificación en este ejemplo.

En el script anterior, estamos comenzando con el encabezado del archivo en el que hemos llamado a la etiqueta CSS "estilo". Dentro de esta etiqueta, agregaremos una clase para el elemento de entrada que representa la casilla de verificación del lenguaje de marcado de hipertexto. Nombraremos el tamaño de la clase. En esta clase, definiremos las propiedades que cambiarán el tamaño de la casilla de verificación. Primero, definiremos la propiedad de ancho dándole un valor de "50px". Luego, definiremos la propiedad de altura dándole el mismo valor.

Después de eso, cerraremos el estilo y las etiquetas de encabezado del archivo para abrir la etiqueta del cuerpo. En la etiqueta del cuerpo, comenzaremos dándole un encabezado con una etiqueta "H1". Entonces, abriremos la etiqueta de entrada. En esta etiqueta, definiremos el tipo del elemento de entrada etiquetándolo como una casilla de verificación. Después de esto, también llamaremos a la clase de estilo "tamaño" que creamos en el encabezado del archivo. Al final, lo especificaremos como "marcado" de forma predeterminada y cerraremos la entrada y la etiqueta del cuerpo.

Después de guardar el script anterior y abrirlo en nuestro navegador, obtendremos la salida anterior. Como resultado de los parámetros de altura y ancho en esta salida, la casilla de verificación se ha expandido en tamaño.

Ejemplo 02: Aumento del tamaño de una casilla de verificación predeterminada utilizando propiedades de altura y ancho a través de CSS en línea

El enfoque de etiqueta de estilo CSS en línea se utilizará para ajustar el tamaño de la casilla de verificación en este ejemplo. Aumentaremos una casilla de verificación predeterminada ofrecida por el lenguaje de marcado de hipertexto en este ejemplo. Ambas características de cambio de tamaño se aplicarán a una etiqueta de estilo dentro del elemento de entrada en este ejemplo.

Al comienzo del script, abriremos una etiqueta de estilo en la etiqueta de la cabeza solo para el cuerpo del archivo en el que alinearemos el texto del cuerpo al centro en este script. Entonces, cerraremos el estilo y la etiqueta de la cabeza para abrir la etiqueta del cuerpo. En la etiqueta del cuerpo, daremos un rumbo a la página con la ayuda de la etiqueta "H1". Luego, abriremos la etiqueta de entrada y definiremos el tipo de elemento de entrada identificándolo como una "casilla de verificación."Después de eso, especificaremos el estilo de la casilla de verificación utilizando el término CSS en línea" estilo."En esta llamada, definiremos las características de ancho y altura al proporcionarles valores de píxeles. Luego, lo configuraremos en "verificados" de forma predeterminada y cerraremos las etiquetas de entrada y cuerpo. Guardaremos este archivo en el ".formato HTML "y ábralo en nuestro navegador para obtener la salida que se muestra a continuación:

Podemos observar en esta salida que la casilla de verificación ha crecido debido a las propiedades de altura y ancho como se define dentro del atributo de estilo de la etiqueta de entrada.

Ejemplo 03: Aumento del tamaño de una casilla de verificación predeterminada utilizando la propiedad de transformación a través de la etiqueta de estilo CSS

Aumentaremos el tamaño de una casilla de verificación predeterminada proporcionada por el lenguaje de marcado de hipertexto. En este ejemplo, la casilla de verificación tendrá un tamaño personalizado utilizando la técnica de etiqueta de estilo CSS. En este ejemplo, la propiedad de transformación se agregará a una clase de estilo de casilla de verificación que ampliará el tamaño de casilla de verificación predeterminado.

En el siguiente script, comenzamos con el encabezado del archivo donde hemos llamado la etiqueta CSS "estilo."Dentro de la etiqueta de entrada, agregaremos una clase al elemento de entrada que representa la casilla de verificación del lenguaje de marcado de hipertexto. Luego llamaremos al tamaño de la clase. Dentro de él, crearemos el atributo que ajustará el tamaño de la casilla de verificación. La propiedad de transformación se definirá y escribirá con la palabra clave de escala que aceptará el tamaño del tamaño de escala como entrada. Después de eso, cerraremos la etiqueta de estilo y el encabezado del archivo para dejar espacio para la etiqueta del cuerpo. Comenzaremos con una etiqueta "H1" en la etiqueta del cuerpo para darle un encabezado. Luego, abriremos la etiqueta de entrada donde etiquetaremos el elemento de entrada como una casilla de verificación y describiremos su tipo allí. Después de eso, nombraremos el "tamaño" de la clase de estilo que establecimos en el encabezado del archivo. Finalmente, estableceremos el valor predeterminado en "marcado" y cerraremos las etiquetas de entrada y cuerpo.

Obtendremos la salida anterior después de guardar el script anterior y abrirlo en nuestro navegador. En esta salida, podemos ver que la casilla de verificación se ha expandido en tamaño debido a la propiedad de transformación.

Ejemplo 04: Uso de tres propiedades CSS para aumentar el tamaño de una casilla de verificación en un archivo HTML

El enfoque de etiqueta de estilo CSS en línea se utilizará para ajustar el tamaño de la casilla de verificación en este ejemplo. Las tres propiedades CSS se agregarán a una etiqueta de estilo dentro de la etiqueta de entrada en este ejemplo. Aumentaremos el tamaño de la casilla de verificación predeterminado que ofrece el lenguaje de marcado de hipertexto.

En este script, comenzaremos abriendo una etiqueta de estilo en la etiqueta de la cabeza que solo se aplica al cuerpo del archivo. Entonces, centraremos el contenido del cuerpo. El estilo y las etiquetas de la cabeza se cerrarán, permitiendo que la etiqueta del cuerpo se abra. Con la ayuda del elemento "H1" en la etiqueta del cuerpo, le daremos un encabezado a la página. Después de eso, utilizaremos el "estilo" en línea CSS para expresar el estilo de la casilla de verificación. En esta llamada, especificaremos las características de ancho y altura al proporcionarles valores de píxeles. Luego, también agregaremos la propiedad de transformación en esta llamada para escalar la casilla de verificación en consecuencia. Después de esto, lo definiremos como "comprobado" y cerraremos la entrada y las etiquetas del cuerpo. Guardaremos este archivo en el ".formato HTML "y ábralo en nuestro navegador para obtener la salida que se muestra a continuación:

Como resultado de las propiedades de altura, ancho y transformación en esta salida que se definieron dentro de la etiqueta de entrada, la casilla de verificación se ha expandido en tamaño.

Conclusión:

En este artículo, hemos discutido varias propiedades de CSS que se utilizan para aumentar el tamaño o expandir una casilla de verificación de tamaño predeterminado en un archivo HTML. Las dos primeras propiedades son la altura y el ancho que se pueden agregar a una clase de estilo o etiqueta en el elemento de entrada del lenguaje de marcado de hipertexto. Estas propiedades se utilizaron para aumentar el tamaño de una casilla de verificación en dos técnicas CSS diferentes que son CSS de etiqueta de estilo y CSS en línea. También implementamos la propiedad de transformación que proporciona CSS que utiliza la función de escala para expandir una casilla de verificación predeterminada.