Как с помощью CSS можно стилизовать элементы интерфейса в зависимости от их состояния (checked, disabled и т.д.)?

Стилизовать элементы интерфейса в зависимости от их состояния с помощью CSS можно с помощью псевдоклассов. 15 Они уточняют тип или состояние элемента и позволяют задавать стили для разных качественных признаков, например реакции на наведение курсора или порядка следования. 1

Некоторые псевдоклассы, которые помогают стилизовать элементы в зависимости от их состояния:

• :checked. 15 Применяется к элементам, состояние которых меняется с помощью атрибута checked (для флажков и радиокнопок). 5
• :default. 15 Применяется к элементам формы, у которых можно задать начальное состояние (например, к чекбоксам, у которых по умолчанию установлен атрибут checked). 1
• :disabled, :enabled. 1 Позволяют находить элементы формы по состоянию их атрибута disabled. 1

Например, в зависимости от состояния чекбокса :checked, :disabled и :focus следующему за ним элементу, например , можно задавать стили с помощью селектора «+». 2