Estoy tratando de construir una casilla de verificación personalizada. Pero tengo un diseño html como
<label class="container">One <div class="check"> <input type="checkbox"> </div> <div class="checkmark"> </div> </label>Aquí estoy tratando de ocultar la entrada y diseñar .checkmark como mi nueva casilla de verificación personalizada, pero como están en divs diferentes, creo que no puedo seleccionarlos. Debería hacerlo en esta estructura HTML. Si me pueden ayudar a manejarlo en esta estructura html, estaría muy contento. Gracias.
<html> <style> /* The container */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { display: none; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .container.checkmark:after { display: block; } .a input:checked ~ .container.checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } </style> <body> <label class="container">Checkbox <div class="check"> <input type="checkbox"> </div> <div class="checkmark"> </div> </label> </body> </html>Agregue el div con marca de verificación de clase dentro del div con verificación de clase. Junto a la casilla de verificación
/* The container */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { display: none; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container:hover input~.checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked~.checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked~.container.checkmark:after { display: block; } .a input:checked~.container.checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } <label class="container">Checkbox <div class="check"> <input type="checkbox"> <div class="checkmark"> </div> </div> </label>Aquí hay una solución que funciona sin modificar la estructura HTML.
Usando el pseudo-elemento ::before podemos manipular su comportamiento dependiendo de si la casilla de verificación está marcada o no.
/* Custom checkbox */ input[type="checkbox"] { appearance:none; display:block!important; position:relative; } input[type="checkbox"]::before { content: ''; position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; cursor:pointer; } .check { position: absolute; left: 0; top: 0; } input[type="checkbox"]:hover::before { background-color: silver; } input[type="checkbox"]:checked::before { background-color: #2196F3!important; } /* The container */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <label class="container">Checkbox <div class="check"> <input type="checkbox"> </div> <div class="checkmark"> </div> </label>