Tôi nghĩ bạn đang cố gắng làm phức tạp hóa mọi thứ. Một giải pháp đơn giản là chỉ tạo kiểu cho hộp kiểm của bạn theo mặc định với các kiểu không được chọn và sau đó thêm các kiểu trạng thái đã chọn.
input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}
Tôi xin lỗi vì đã đưa ra một chủ đề cũ nhưng cảm thấy nó có thể sử dụng một câu trả lời tốt hơn.
CHỈNH SỬA (3/3/2016):
Thông số kỹ thuật của W3C nêu rằng đó :not(:checked)là ví dụ của chúng để chọn trạng thái không được chọn. Tuy nhiên, đây rõ ràng là trạng thái không được chọn và sẽ chỉ áp dụng các kiểu đó cho trạng thái không được chọn. Điều này rất hữu ích để thêm kiểu chỉ cần thiết ở trạng thái không được chọn và sẽ cần được xóa khỏi trạng thái đã chọn nếu được sử dụng trên input[type="checkbox"]bộ chọn. Xem ví dụ dưới đây để làm rõ.
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
}
Nếu không sử dụng :not(:checked)trong ví dụ trên, :checkedbộ chọn sẽ cần phải sử dụng a border: none;để đạt được ảnh hưởng tương tự.
Sử dụng input[type="checkbox"]tạo kiểu cho cơ sở để giảm sự trùng lặp.
Sử dụng input[type="checkbox"]:not(:checked)cho các kiểu không được chọn rõ ràng mà bạn không muốn áp dụng cho trạng thái đã chọn.