Je pense que vous essayez de compliquer les choses à l'excès. Une solution simple est de styliser votre case à cocher par défaut avec les styles non cochés, puis d'ajouter les styles de l'état coché.
input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}
Je m'excuse de faire remonter un vieux fil de discussion, mais j'ai eu l'impression qu'une meilleure réponse aurait pu être apportée.
MODIFIER (3/3/2016) :
Les spécifications du W3C stipulent que :not(:checked) comme exemple de sélection de l'état non coché. Cependant, il s'agit explicitement de l'état non coché et ces styles ne seront appliqués qu'à l'état non coché. Ceci est utile pour ajouter un style qui n'est nécessaire que pour l'état non coché et qui devrait être supprimé de l'état coché s'il était utilisé pour l'état coché. input[type="checkbox"] sélecteur. Voir l'exemple ci-dessous pour plus de clarté.
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
}
Sans utiliser :not(:checked) dans l'exemple ci-dessus, le :checked aurait dû utiliser un sélecteur border: none; pour obtenir le même effet.
Utiliser le input[type="checkbox"] pour le style de base afin de réduire les doublons.
Utiliser le input[type="checkbox"]:not(:checked) pour les styles explicites non cochés que vous ne souhaitez pas appliquer à l'état coché.
