Creo que estás intentando complicar demasiado las cosas. Una solución simple es simplemente diseñar su casilla de verificación por defecto con los estilos sin marcar y luego agregar los estilos de estado marcados.
input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}
Me disculpo por mencionar un tema antiguo, pero sentí que podría haber tenido una mejor respuesta.
EDITAR (3/3/2016):
Las especificaciones del W3C lo establecen :not(:checked)como ejemplo para seleccionar el estado sin marcar. Sin embargo, este es explícitamente el estado sin marcar y solo aplicará esos estilos al estado sin marcar. Esto es útil para agregar un estilo que solo se necesita en el estado sin marcar y debería eliminarse del estado marcado si se usa en el input[type="checkbox"]selector. Consulte el ejemplo a continuación para obtener una aclaración.
input[type="checkbox"] {
/* Base Styles aka unchecked */
font-weight: 300; // Will be overwritten by :checked
font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
/* Explicit Unchecked Styles */
border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
/* Checked Styles */
font-weight: 900; // Use a bold font when checked
}
Sin usar :not(:checked)en el ejemplo anterior, el :checkedselector habría necesitado usar a border: none;para lograr el mismo efecto.
Utilice el input[type="checkbox"]estilo base para reducir la duplicación.
Utilice input[type="checkbox"]:not(:checked)para estilos explícitos sin marcar que no desee aplicar al estado marcado.