Tôi nghĩ rằng bạn đang cố gắng hơn những điều phức tạp. Một giải pháp đơn giản là chỉ tạo kiểu hộp kiểm của bạn theo mặc định với các kiểu không được kiểm tra và sau đó thêm 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 chuỗi cũ nhưng cảm thấy như nó có thể đã sử dụng câu trả lời tốt hơn.
EDIT (2016/03/03):
bang W3C Specs rằng :not(:checked) như tấm gương của họ để lựa chọn trạng thái không được kiểm soát.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 cho việc thêm kiểu dáng chỉ cần thiết vào trạng thái không được chọn và sẽ cần được loại bỏ khỏi trạng thái đã chọn nếu được sử dụng trên bộ chọn input[type="checkbox"]. 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 bộ chọn :checked sẽ cần thiết để sử dụng một border: none; để đạt được cùng ảnh hưởng.
Sử dụng input[type="checkbox"] để tạo kiểu cơ sở để giảm trùng lặp.
Sử dụng input[type="checkbox"]:not(:checked) cho các kiểu bỏ chọn rõ ràng mà bạn không muốn áp dụng cho trạng thái đã chọn.
Nguồn
2015-05-21 16:34:38
Chỉ cần thêm vào câu trả lời này mà chọn: không (: đã chọn) hoạt động hoàn hảo trên Chrome, nhưng nó không hoạt động trên IE (được kiểm tra vào ngày 9 và 11). –
@Bruno Finger:: checked và: not (: checked) cả hai đều hoạt động trên IE, ngoại trừ cả hai đều bị ảnh hưởng bởi lỗi khi thay đổi trạng thái đã kiểm tra không cập nhật kiểu phần tử được nhắm mục tiêu liên quan đến kiểm tra/yếu tố không được chọn. – BoltClock