in

Cómo crear una casilla de verificación personalizada y botones de opción

/ * Personaliza la etiqueta (el contenedor) * /
.envase {
bloqueo de pantalla;

posición: relativa;
padding-left: 35px;
margen inferior: 12px;
cursor: puntero;
tamaño de fuente: 22px;
-webkit-user-select: ninguno;
-moz-user-select: ninguno;
-ms-user-select: ninguno;

selección de usuario: ninguno;
}

/ * Ocultar la casilla de verificación predeterminada del navegador * /
.container input {
posición: absoluta;

opacidad: 0;
cursor: puntero;
altura: 0;
ancho: 0;
}

/ * Crear una casilla de verificación personalizada * /
.marca de verificación {
posición: absoluta;
arriba: 0;
izquierda: 0;
altura: 25px;

ancho: 25px;
color de fondo: #eee;
}

/ * Al pasar el mouse, agregue un color de fondo gris * /
.container: hover input ~ .checkmark {
color de fondo: #ccc;
}

/ * Cuando la casilla de verificación está marcada, agrega un fondo azul * /
.Entrada de contenedor: marcada ~ .checkmark {
color de fondo: # 2196F3;
}

/ * Crea la marca de verificación / indicador (oculto cuando no está marcado) * /
.checkmark: después de {

contenido: «»;
posición: absoluta;
pantalla: ninguna;
}

/ * Mostrar la marca de verificación cuando esté marcado * /
.entrada de contenedor: marcada ~ .marca de comprobación: después de {

bloqueo de pantalla;
}

/ * Aplicar estilo a la marca de verificación / indicador * /
.container .checkmark: after {
izquierda: 9px;
superior: 5px;
ancho: 5px;
altura: 10px;
borde: blanco sólido;

ancho del borde: 0 3px 3px 0;
-webkit-transform: rotar (45 grados);

-ms-transform: rotar (45 grados);
transformar: rotar (45 grados);
}

Deja una respuesta

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

Editor de oracleBusiness Intelligence

types of method references

Referencia del método Java 8 – javatpoint