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

❮ Назад Вперед ❯

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

Флажки и переключатели включаются и выключаются пользователем.

Версия

CSS3

Синтаксис

:checked {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      margin: 10px;
      font-size: 20px;
      }
      input:checked + label {
      color: #000;
      }
      input[type="radio"]:checked {
      box-shadow: 0 0 0 4px #8ebf42;
      }
      /* Checkbox element, when checked */
      input[type="checkbox"]:checked {
      box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :checked</h2>
    <div>
      <input type="radio" name="my-input" id="yes">
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no">
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in">
      <label for="opt-in">Нажмите!</label>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      table,tr,th,td{
      border:1px solid #ccc;
      text-align:center;
      border-collapse:collapse;
      padding:8px;
      }
      #toggle {
      display: none;
      }
      .expandable {
      visibility: collapse;
      background: #1c87c9;
      }
      #btn {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #8ebf42;
      color: #fff;
      cursor:pointer;
      border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
      visibility: visible;
      }
      #toggle:checked ~ #btn {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::checked</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Колонка 1</th>
          <th>Колонка 2</th>
          <th>Колонка 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
        <tr>
          <td>[Текст]</td>
          <td>[Текст]</td>
          <td>[Текст]</td>
        </tr>
        <tr class="expandable">
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
        <tr>
          <td>[Текст]</td>
          <td>[Текст]</td>
          <td>[Текст]</td>
        </tr>
        <tr class="expandable">
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Нажмите сюда!</label>
  </body>
</html>

Попробуйте сами!


4.0+	12.0+	3.5+	3.2+	10.0+

4.0+

12.0+

3.5+

3.2+

10.0+

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

Версия

Синтаксис

Пример

Пример

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

Практикуйте свои знания