Как работает CSS-селектор псевдокласса :checked 

Development | Amber | Комментировать запись

Как вы знаете, пользователи могут менять состояние элементов Radio и Checkbox. Например, некоторые пункты меню отмечаются галочкой, когда пользователь выбирает их. :checked — это селектор псевдокласса, который используется для стилизации состояния чекбоксов, флажков или опций. Проще говоря, когда вы ставите галочку, она появляется именно благодаря :checked. 

Кроме того, [HTML5] проверяет, соответствуют ли установленные флажки, переключатели и выбранные элементы <option> псевдоклассу :checked.

Хотя псевдокласс :checked является динамическим по своей природе и может быть изменен действием пользователя (поскольку он также может быть основан на наличии семантических атрибутов в документе (таких как selected и checked в [HTML5])), он применяется ко всем медиа.

Вот простой пример использования данного селектора:

:checked {
  background-color: hotpink;
}

/* Only style checked checkboxes */
input[type="checkbox"]:checked {
  padding-left: 1em;
}

Стилизация пустых элементов

Чтобы оформить пустые, неотмеченные чекбоксы (то есть те, в которых пока нет галочек), вместе с :checked вы можете использовать псевдокласс :not. Это обеспечит явную стилизацию любых неотмеченных элементов. Это может быть полезно, если на вашем сайте есть определенные стили, которые вы не хотите применять к отмеченным элементам. 

input:not(:checked) {
  opacity: 0.6;
}

Браузерная поддержка

Информацию о поддержке данного псевдокласса вы можете найти на сайте Can I Use css-sel3?.

Читайте также: Создание псевдоклассов в CSS