:checked

Содержание

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

Синтаксис

Селектор:checked { ... }

Примеры использования

input[type="radio"]:checked { ... }

Стиль применяется только ко включенным переключателям.

input[type="checkbox"]:checked { ... }

Стиль применяется только к помеченным флажкам (чекбоксам).

option:checked { ... }

Стиль применяется только к выбранным элементам списка.

Пример

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>checked</title>
  <style>
   input:checked + span {
    background: #fc0;
   }
  </style>
 </head>
 <body>
  <p><strong>С какими операционными системамы вы знакомы?</strong></p>
  <p><input type="checkbox" name="a1"><span>Windows 7</span><br>
  <input type="checkbox" name="a2"><span>Windows Vista</span><br>
  <input type="checkbox" name="a3"><span>Windows XP</span><br>
  <input type="checkbox" name="a4"><span>System X</span><br> 
  <input type="checkbox" name="a5"><span>Linux</span><br> 
  <input type="checkbox" name="a6"><span>Mac OS</span></p>
  <p><input type="submit" value="Отправить"></p>
 </body>
</html>

В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 1.

Результат использования псевдокласса checked

Рис. 1. Результат использования псевдокласса :checked

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Предлагаемая рекомендация
Selectors Level 4Рабочий проект
CSS Basic User Interface Module Level 3Рабочий проект
Selectors Level 3Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
9193.11
AndroidFirefox MobileOpera MobileSafari Mobile
2.119.53.1




Рекомендую хостинг: beget.ru

Сервер падал:49 дн. 5:28 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru