HTML proporciona los diversos parámetros de entrada para insertar los valores, incluidos los botones, los campos de texto, las casillas de verificación, las listas ordenadas/desordenadas y muchos más. Más específicamente, si está creando un sitio web y desea que los visitantes puedan elegir varios elementos de un menú, agregar una casilla de verificación es una excelente opción.

Las casillas de verificación permiten a los usuarios seleccionar más de una opción en el menú.

Este tutorial indicará:

• Cómo crear una casilla de verificación con HTML?
• Cómo diseñar las casillas de verificación con CSS?

Cómo crear una casilla de verificación con HTML?

Siga los pasos dados para crear una casilla de verificación con HTML.

Paso 1: Agregar encabezado

Incluya un encabezado en la página HTML utilizando el

etiqueta. Por ejemplo, hemos utilizado etiquetas de encabezado de nivel 1 "

"Y agregó el texto como"Mejores sitios web de tutoriales":

Mejores sitios web de tutoriales

Producción

Paso 2: crear una casilla de verificación

Ahora, agregue una etiqueta junto con el atributo de clase y coloque el nombre de la etiqueta entre las etiquetas. Después de eso, defina un elemento con el tipo "caja"Para crear una casilla de verificación con un nombre de etiqueta:

Linuxhint

Como puede ver, la casilla de verificación se crea correctamente con el título "Linuxhint":

Para agregar otra opción de casilla de verificación, nuevamente cree una nueva etiqueta, incruste el nombre de la etiqueta entre ""Etiquetas e inserte el""Elemento con tipo"caja":

Creadores de contenido de TSL

Se puede observar que se agregan múltiples casillas en la página web:

Avancemos hacia la siguiente sección para diseñar la casilla de verificación.

Cómo diseñar la casilla de verificación con CSS?

Para peinar la casilla de verificación con CSS, siga las instrucciones dadas.

Paso 1: Aplicar el estilo en la casilla de verificación

Aplique las siguientes propiedades en el ".principalClase que se usa para acceder al elemento:

• Agregue la propiedad de visualización especificando el valor "bloquear"Tratar a un elemento como un bloque.
• Establezca la propiedad de la posición como "relativo"Para cambiar el elemento en relación con sí mismo y el elemento principal.
• Establezca el relleno-izquierda con el valor "45px"Para establecer el ancho del área de relleno a la izquierda y al fondo del margen con el"15px"Valor para crear espacio alrededor de los elementos fuera de cualquier fronteras definidas.
• Establezca el tamaño de fuente de la etiqueta:

.principal
Display: Block; Font-Size: 20px;
Posición: relativo;
margen-fondo: 15px;
cursor: puntero; padding-izquierda: 45px;

Paso 2: ajustar la posición de la casilla de verificación

Establezca algunas propiedades CSS en el ".LinuxhintClase para ajustar la posición de casilla de verificación, de la siguiente manera:

• Establezca la posición como "absoluto".
• Establezca la altura y el ancho como "25px"
• Establezca el color de fondo como "negro":

.Linuxhint
Posición: Absoluto; Color de fondo: negro;
arriba: 0;
Izquierda: 0;
Altura: 25px;
Ancho: 25px;

Paso 3: Establezca el color de fondo cuando la casilla de verificación se "verifica"

Ahora, la propiedad de color de fondo se utiliza para establecer lo que se mostrará cuando se verifique la casilla de verificación:

.Entrada principal: marcado ~ .Linuxhint
Color de fondo: RGB (231, 209, 12);

Paso 4: Establezca el estilo de casilla de verificación

En este paso, use el código proporcionado a continuación para configurar la propiedad en la casilla de verificación. La casilla de verificación se mostrará en la casilla de verificación cuando se verifique y no se mostrará cuando no se verifique:

.Linuxhint: después
contenido: "";
Posición: Absoluto;
Pantalla: ninguno;

Ahora, configure la propiedad de visualización como un "bloquear"Para mostrar la marca de verificación cuando se verifica la casilla de verificación:

.Entrada principal: marcado ~ .Linuxhint: después
bloqueo de pantalla;

Finalmente, use la propiedad de transformación CSS en el rectángulo de casilla de verificación para que el borde parezca un "garrapata" forma:

.principal .Linuxhint: después
Izquierda: 8px;
Abajo: 5px;
Ancho: 6px;
Altura: 12px;
borde: RGB sólido (250, 238, 238);
ancho de borde: 0 4px 4px 0;
transformar: girar (45deg);

Producción

Has aprendido el método más fácil para diseñar la casilla de verificación usando CSS.

Conclusión

Para peinar una casilla de verificación con CSS, primero, cree una casilla de verificación con la ayuda de HTML. A continuación, defina el atributo de clase en el elemento HTML y aplique el CSS en la casilla de verificación. Después de eso, diseñe las casillas de verificación utilizando las propiedades de CSS en la clase, como la posición de la casilla de verificación, el color de fondo y el tamaño de las casillas de verificación utilizando las propiedades de altura y ancho. Esta publicación demostró el método para diseñar la casilla de verificación usando CSS.