Cómo diseñar la casilla de verificación personalizada de Bootstrap

Una popular Bootstrap CSS Framework permite a los desarrolladores crear aplicaciones web que preparan fácil y rápidamente y receptivas para dispositivos móviles. Tiene cientos de clases prediseñadas de CSS. Todo lo que necesita hacer es agregar la clase requerida al elemento particular. Sin embargo, para especificar estilos personalizados a elementos, se puede usar CSS.

Este artículo cubrirá:

• ¿Cuál es el elemento html ""??
• Cómo diseñar la casilla de verificación personalizada de Bootstrap?

¿Cuál es el elemento html ""??

En HTML, el ""Elemento con el tipo"caja"Crea una casilla de verificación en la página web. Además, las casillas de verificación permiten verificar más de una casilla de verificación a la vez.

Ejemplo

Antes de avanzar hacia el tema principal de esta publicación, veamos cómo se ve la casilla de verificación predeterminada. Para hacerlo, agregue el ""Elemento con el título y especifique el""Elemento con el tipo"caja"Y el atributo"comprobado". El "comprobado"Atributo con el valor"comprobado"Se utiliza para verificar la casilla de forma predeterminada:

Estilo predeterminado de casilla de verificación

Producción

Cómo diseñar la casilla de verificación personalizada de Bootstrap?

Para hacer la casilla de verificación personalizada, pruebe los pasos mencionados a continuación:

Paso 1: crear un archivo HTML

Primero, cree un archivo HTML siguiendo las siguientes instrucciones:

• Agrega un ""Elemento con el"P-4"Y clases de" fluido de contenedores ".
• Luego, especifique el encabezado usando el "

  " elemento.

• Agregue tres ""Elementos y asignarles la clase"verificación personalizada".
• Dentro de ""Elementos, agregue el""Elemento con el"tipo" valor de atributo "caja". Solo la primera entrada debe estar asociada con el "comprobado" atributo.
• Por último, mencione el ""Elemento para la marca de verificación.

Html

Seleccione el menú

Pizza



Hamburguesa



Papas fritas

Los pasos a continuación deben implementarse dentro de la sección CSS.

Paso 2: Ocultar la casilla de verificación predeterminada

Como necesitamos crear una casilla de verificación personalizada, se requiere ocultarla. Para hacerlo, acceda al "verificación personalizada"Clase y aplique los estilos en el""Elementos:

.entrada de verificación personalizada
Posición: Absoluto;
Opacidad: 0;

Aquí:

• "posición" con el "absoluto"El valor establece la posición del elemento en relación con su elemento principal.
• "opacidad"Con el valor"0"Hide el""Elementos.

Paso 3: diseñe la clase de "verificación personalizada"

.Verificación personalizada
tamaño de fuente: 22px;
Posición: relativo;
bloqueo de pantalla;
ROLDE-LEFURA: 35px;
cursor: puntero;
Botón de margen: 12px;

La explicación de las propiedades mencionadas anteriormente se discute a continuación:

• "tamaño de fuente"La propiedad establece el tamaño de fuente del elemento.
• "posición" con el "relativo"El valor ajusta la posición del elemento correspondiente a su posición actual.
• "mostrar" con el "bloquear"El valor da el ancho completo a la etiqueta.
• "pesadilla"Agrega algo de espacio a la izquierda del contenido del elemento.
• "cursor"Establece el estilo del puntero del mouse.
• "margen"Agrega espacio en la parte inferior del elemento.

Paso 4: crear una casilla de verificación personalizada

Para hacer la casilla de verificación personalizada, agregue las siguientes propiedades de CSS:

.marca de verificación
Posición: Absoluto;
Altura: 27px;
Ancho: 27px;
arriba: 0;
Izquierda: 0;
Color de fondo: RGB (233, 233, 233);
Border-Radius: 10px;

Aquí:

• "alto y ancho"Las propiedades establecen el tamaño del elemento.
• "arriba "y" izquierda "con" 0"Los valores no especifican espacio en la parte superior e izquierda del elemento.
• "color de fondo"Determina el color de fondo del elemento.
• "radio fronterizo"Ronda las esquinas del elemento.

Se puede observar que las casillas de verificación personalizadas se han creado con éxito:

Paso 5: diseñe la casilla de verificación cuando se revise

Las propiedades de CSS a continuación se implementan en la casilla de verificación cuando se verifica:

.Entrada de verificación personalizada: marcado ~.marca de verificación
Color de fondo: #6202CF;
Border-Radius: 5px;

Hasta ahora, las casillas de verificación se diseñan como se muestra en el siguiente GIF:

Ahora, creemos la marca de verificación en las secciones a continuación.

Paso 6: Crea la marca de verificación

Para ocultar la marca de verificación cuando no esté marcado, implementa las propiedades mencionadas a continuación:

.Marca de verificación: después de
contenido: "";
Pantalla: ninguno;
Posición: Absoluto;

El ".Marca de verificación: después"Se menciona para acceder a la clase"marca de verificación "y": después"Es una pseudo-clase, utilizada para implementar estilos después del contenido:

• "contenido"Especifica el contenido insertado.
• "mostrar"Con el valor"ninguno"Oculta la marca de verificación.

Paso 7: Muestre la marca de verificación cuando se revise

Cuando el usuario verifica la casilla de verificación, debe mostrar la marca de verificación. Para hacerlo, la marca de verificación se aplica con el CSS "mostrar"Propiedad con el valor"bloquear":

.Entrada de verificación personalizada: marcado ~.Marca de verificación: después de
bloqueo de pantalla;

Paso 8: diseñe la marca de verificación

Aquí están las propiedades de CSS para crear la marca de tick:

.verificación personalizada .Marca de verificación: después de
Izquierda: 8px;
Arriba: 5px;
Ancho: 9px;
Altura: 14px;
borde: blanco sólido;
ancho de borde: 0 3px 3px 0;
transformar: girar (45deg);

Según el código dado:

• "Izquierda "y" Top"Especifique el espacio en los lados izquierdo y superior de la marca de tick.
• "anchura y altura"Ajuste el área de la marca de la marca.
• "borde"La propiedad crea la marca de tick.
• "ancho del borde"La propiedad especifica los bordes superior, derecha, inferior e izquierda. Aquí solo se especifican las propiedades correctas e inferiores.
• "transformar"Propiedad con el valor"Rotar (45 grados)"Gira la marca de tick a 45 grados.

Producción

Eso se trataba de cómo diseñar una casilla de verificación personalizada usando bootstrap.

Conclusión

Para peinar la casilla de verificación personalizada de Bootstrap, primero, cree una página HTML. Añade el "" y ""Con el tipo"caja"Elementos. Luego, se usan varias propiedades CSS para diseñarlas. Más específicamente, para hacer la marca, el CSS "borde "y" ancho de fronteraSe utilizan las propiedades. Esta publicación ha explicado cómo diseñar una casilla de verificación personalizada en Bootstrap.