Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:checked

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

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: к тегу <INPUT>.

Значения

Нет.

Синтаксис

селектор:checked {  }

Пример CSS: использование :checked

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :checked</title>
  <style type="text/css">
   input {
    width: 20px; /* ширина элемента управления */
    height: 20px; /* его высота */
    border: 2px  #000000 solid; /* стили рамки */
   }
   input:checked {
    color: #00cc00; /* цвет выбранного элемента */
   }
   input:checked + span {
    color: red; /* цвет текста в теге SPAN, соседнем с выбранным элементом */
   }
  </style>
 </head>
 <body>
  <div>
   Ваш пол:<br>
   <input type="radio" checked name="sex" value="male"><span>M</span>
   <input type="radio" name="sex" value="female"><span>Ж</span><br>
   Что вы любите?<br>
   <input type="checkbox" checked name="drink" value="1"><span>Чай</span>
   <input type="checkbox" name="drink" value="2"><span>Кофе</span>
   <input type="checkbox" checked name="dance" value="3"><span>Потанцуем</span>
  </div>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS :checked в браузере Opera.

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

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетЧастичноЧастичноЧастичноДаЧастично

Chrome, Firefox, Safari и IE с версии 9.0 хоть и понимают :checked, но не меняют внешний вид самих переключателей и флажков.