Я думаю, ти намагаєшся надто ускладнювати речі. Просте рішення полягає в тому, щоб просто встановити прапорець за замовчуванням з неперевіреними стилями, а потім додати стилі перевірених станів.
input[type="checkbox"] {
// Unchecked Styles
}
input[type="checkbox"]:checked {
// Checked Styles
}
Прошу вибачення за те, що я вивів стару тему, але відчув, що міг би скористатися кращою відповіддю.
EDIT (3.03.2016):
Специфікації W3C зазначають, що :not(:checked)їх прикладом для вибору неперевіреного стану. Однак це явно неперевірений стан і застосовуватиме лише ці стилі до неперевіреного стану. Це корисно для додавання стилів, які потрібні лише у неперевіреному стані та потребують вилучення із перевіреного стану, якщо вони використовуються у input[type="checkbox"]селекторі. Для роз'яснення див. Приклад нижче.
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
}
Без використання :not(:checked)в наведеному вище прикладі :checkedселектору потрібно було б використовувати a, border: none;щоб досягти такого ж ефекту.
Використовуйте input[type="checkbox"]для базового стилю, щоб зменшити дублювання.
Використовуйте input[type="checkbox"]:not(:checked)для явних неперевірених стилів, які ви не хочете застосовувати до перевіреного стану.