Страница CSS checked: изучаем стилизацию отмеченных элементов

Введение в псевдокласс ":checked" CSS

Псевдокласс ":checked" в CSS используется для выбора элементов формы, которые были отмечены или выбраны пользователем. Когда элемент формы, такой как флажок (checkbox) или переключатель (radio), отмечен или выбран, псевдокласс ":checked" применяется к соответствующему элементу.

Использование псевдокласса ":checked" в CSS

Приведен простой пример использования псевдокласса ":checked" в CSS:

HTML код:

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Отметить</label>

CSS код:

#myCheckbox:checked + label {
  color: red;
}

В этом примере, когда флажок (checkbox) с id "myCheckbox" будет отмечен, цвет текста метки изменится на красный.

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

Приведен еще один пример, где мы настраиваем стилизацию элементов формы при помощи псевдокласса ":checked":

HTML код:

<input type="radio" name="myRadio" id="radio1">
<label for="radio1">Опция 1</label>

<input type="radio" name="myRadio" id="radio2">
<label for="radio2">Опция 2</label>

CSS код:

input[type="radio"]:checked + label {
  background-color: yellow;
  color: black;
}

В этом примере, при выборе одной из опций (radio1 или radio2), фоновый цвет метки изменится на желтый, а цвет текста станет черным.

Более сложные примеры использования псевдокласса ":checked" могут включать анимацию, трансформации и другие стилизационные эффекты.

В заключение, псевдокласс ":checked" в CSS является очень мощным инструментом для стилизации элементов формы, которые были отмечены или выбраны пользователем. Использование этого псевдокласса позволяет создать интерактивные и привлекательные пользователю формы и интерфейсы.