Casilla de verificación personalizada usando solo CSS y HTML

Necesito crear una checkbox personalizada usando solo html y CSS. Hasta ahora tengo:

HTML / CSS:

.checkbox-custom { opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label { display: inline-block; vertical-align: middle; margin: 5px; cursor: pointer; } .checkbox-custom + .checkbox-custom-label:before { content: ''; background: #fff; border-radius: 5px; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 10px; height: 10px; padding: 2px; margin-right: 10px; text-align: center; } .checkbox-custom:checked + .checkbox-custom-label:before { content: ""; display: inline-block; width: 1px; height: 5px; border: solid blue; border-width: 0 3px 3px 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); border-radius: 0px; margin: 0px 15px 5px 5px; } 
 

La checkbox checked debe ser una marca de verificación con el recuadro bordeado en lugar de solo una marca de verificación. Buscando respuestas, solo he encontrado casos donde la marca de verificación se muestra usando un carácter UTF-8 o una imagen. No puedo usar ninguno de estos para lo que estoy tratando de lograr. Solo puedo usar CSS y HTML simples. ¿Alguna sugerencia?

codepen aquí: http://codepen.io/alisontague/pen/EPXagW?editors=110

El problema es que está utilizando el mismo pseudo elemento para el borde cuadrado y la marca de verificación. La solución simple sería continuar utilizando :before pseudo elemento para el borde, y luego usar un :after pseudo elemento para la marca de verificación.

Ejemplo actualizado

.checkbox-custom colocar absolutamente el :after pseudo elemento relativo al elemento de etiqueta padre .checkbox-custom .

Aquí está el código actualizado:

 .checkbox-custom { display: none; } .checkbox-custom-label { display: inline-block; position: relative; vertical-align: middle; margin: 5px; cursor: pointer; } .checkbox-custom + .checkbox-custom-label:before { content: ''; background: #fff; border-radius: 5px; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 10px; height: 10px; padding: 2px; margin-right: 10px; } .checkbox-custom:checked + .checkbox-custom-label:after { content: ""; padding: 2px; position: absolute; width: 1px; height: 5px; border: solid blue; border-width: 0 3px 3px 0; transform: rotate(45deg); top: 2px; left: 5px; } 
 

Checkboxes

Mi respuesta anterior es incorrecta porque usa el selector ::before pseudo-element en un elemento que no es un contenedor . Gracias a @BoltClock por señalar mi error. Entonces, se me ocurrió otra solución que utiliza el Checkbox Hack y el selector de hermanos CSS3 ( ~ ).

Demostración en CodePen

 input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } input[type=checkbox] ~ label::before { content: '\2713'; display: inline-block; text-align: center; color: white; line-height: 1em; width: 1em; height: 1em; border: 1px inset silver; border-radius: 0.25em; margin: 0.25em; } input[type=checkbox]:checked ~ label::before { color: black; } 
 

No utilicé la funcionalidad “Ejecutar código-fragmento” de StackOverflow porque hace algo extraño cuando lo ejecuto. Creo que es por el truco de la checkbox.

Casilla de verificación personalizada que utiliza solo HTML y CSS junto con tres estados de checkbox (marcada, sin marcar y medio marcada o desmarcada (si se usa en un grupo de casillas de verificación))

  .checkboxcontainer input { display: none; } .checkboxcontainer { display: inlin-block; padding-left: 30px; position: relative; cursor: pointer; user-select: none; } .checkboxcontainer .checkmark { display: inlin-block; width: 25px; height: 25px; background: #eee; position: absolute; left: 0; top: 0; } .checkboxcontainer input:checked+.checkmark { background-color: #2196fc; } .checkboxcontainer input:checked+.checkmark:after { content: ""; position: absolute; height: 4px; width: 9px; border-left: 3px solid white; border-bottom: 3px solid white; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .checkboxcontainer input:indeterminate+.checkmark:after { content: ""; position: absolute; height: 0px; width: 9px; border-left: 3px solid white; border-bottom: 3px solid white; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); } 

Jsfiddle: Demo

 .checkbox-custom { position: relative; } .checkbox-custom input[type=checkbox] { display: none; } .checkbox-custom input[type=checkbox]~b { cursor: pointer; outline: 0; position: relative; display: inline-block; margin: 4px 1px 0; background-color: #ffffff; border: 2px solid #ad823a; width: 24px; height: 24px; vertical-align: middle; line-height: 1; text-align: center; font-size: 20px; color: #ad823a; } .checkbox-custom input[type=checkbox]:checked~b:after { content: '\2713'; }