CSS псевдо-класс :checked

Поддержка браузерами


12.0+	9.0+	3.5+	4.0+	9.6+	3.2+

Описание

CSS псевдо-класс :checked представляет собой выбранный элемент <input> (работает только с type="radio" и type="checkbox") или элемент <option> (только в том случае, если он является дочерним элементом для <select>). Пользователь может изменить состояние элемента, нажав на него или выбрав элемент с другим значением, в этом случае псевдо-класс :checked больше не будет применяться к данному элементу, но переключится на соответствующий.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      input:checked + label{ background-color: yellow; }
    </style>
  </head>
  <body>

    <form>
      <input type="radio" checked="checked" name="sex" id="woman">
	    <label for="woman">Женщина</label><br>
      <input type="radio" name="sex" id="man">
	    <label for="man">Мужчина</label><br>
      <input type="checkbox" checked="checked" id="car">
	    <label for="car">Я имею машину</label><br>
      <input type="checkbox" id="bike">
	    <label for="bike">Я имею мотоцикл</label>
    </form>

  </body>
</html>

Попробовать »