Css input checked: Псевдокласс :checked | htmlbook.ru

Содержание

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>
    <h3>Пример селектора :checked</h3>
    <div>
      <input type="radio" name="my-input">
      <label for="yes">Yes</label>
      <input type="radio" name="my-input">
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox">
      <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>
    <h3>Пример селектора ::checked</h3>
    <input type="checkbox" />
    <table>
      <thead>
        <tr>
          <th>Колонка 1</th>
          <th>Колонка 2</th>
          <th>Колонка 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
        <tr>
          <td>[Текст]</td>
          <td>[Текст]</td>
          <td>[Текст]</td>
        </tr>
        <tr>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
        <tr>
          <td>[Текст]</td>
          <td>[Текст]</td>
          <td>[Текст]</td>
        </tr>
        <tr>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
          <td>[Больше текста]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle">Нажмите сюда!</label>
  </body>
</html>

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

CSS — :checked — :checked CSS псевдо-класс селектор представляет собой любое радио (

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

:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Пользователь может включить это состояние,установив флажок/выбрав элемент,или отключить его,сняв флажок/выбрав элемент.

Примечание. Поскольку браузеры часто воспринимают <option> как заменяемые элементы , степень их стилизации с помощью псевдокласса :checked варьируется от браузера к браузеру.

Syntax

:checked

Examples

Основной пример

HTML

<div>
  <input type="radio" name="my-input">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}


input:checked + label {
  color: red;
}


input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}


input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}


option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Result

Переключение элементов со скрытым флажком

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

HTML

<input type="checkbox" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle">Toggle hidden rows</label>

CSS

#expand-toggle {
  display: none;
}


.expandable {
  visibility: collapse;
  background: #ddd;
}


#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}


#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}


#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

Result

Галерея изображений

Вы можете использовать псевдокласс :checked для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда пользователь нажимает на миниатюру. Смотрите эту демонстрацию для возможного сигнала.

Примечание. Аналогичный эффект, но на основе псевдокласса :hover и без скрытых радиобоксов, см. В этой демонстрации , взятой из справочной страницы : hover .

Specifications

Таблицы BCD загружаются только в браузере

seodon.ru | CSS справочник — :checked

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

Псевдокласс 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

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

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	До 9.0	9.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Нет	Частично	Частично	Частично	Да	Частично

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

html — Можно ли стилизовать :: before метки отмеченного флажка?

К сожалению, в CSS нет селектора предшествующего брата (или родителя); поэтому мы не можем стилизовать на основе состояния (: проверено, или иначе) его последующего брата . Опубликованный CSS:

 . Памятный ввод [type = checkbox]: checked + label :: before {
    содержание: '';
    цвет фона: # 7b519d;
}

Будет работать, только если элемент предшествует :

  
  
   Запомнить меня

  / * Установка значений по умолчанию для неотмеченного состояния: * /
.запомнить input [type = checkbox] + label :: before {
  содержание: '';
  дисплей: встроенный блок;
  ширина: 1em;
  высота: 1em;
}

.remember input [type = checkbox]: checked + label :: before {
  содержание: '';
  цвет фона: # 7b519d;
}

  
  
   Запомнить меня

Хотя вы можете использовать float для визуального перемещения перед :

 .запомнить ввод [type = checkbox] + label {
  плыть налево;
}

 . Памятный ввод [type = checkbox] + label {
  плыть налево;
}

.remember input [type = checkbox] + label :: before {
  содержание: '';
  дисплей: встроенный блок;
  ширина: 1em;
  высота: 1em;
}

.remember input [type = checkbox]: checked + label :: before {
  содержание: '';
  цвет фона: # 7b519d;
}

  
  
   Запомнить меня

Или, в зависимости от ваших требований к кроссбраузерности, вы можете вместо этого использовать flex-box и воспользоваться свойством order (и различными реализациями с префиксом поставщика) для правильного позиционирования элементов (порядок : 1 для and order: 2 для ):

 .помнить {
  дисплей: -webkit-box;
  дисплей: -moz-box;
  дисплей: -ms-flexbox;
  дисплей: -webkit-flex;
  дисплей: гибкий;
  -webkit-box-direction: нормальный;
  -moz-box-direction: нормальный;
  -webkit-box-orient: горизонтальный;
  -moz-box-orient: горизонтальный;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: ряд;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  Flex-wrap: nowrap;
  -webkit-box-pack: начать;
  -moz-box-pack: начать;
  -webkit-justify-content: гибкий старт;
  -ms-flex-pack: start;
  justify-content: гибкий старт;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: растянуть;
  выровнять контент: растянуть;
  -webkit-box-align: начало;
  -moz-box-align: начало;
  -webkit-align-items: гибкий старт;
  -ms-flex-align: start;
  выровнять элементы: гибкий старт;
}
.запомните ввод: nth-child (1) {
  -webkit-box-порядковая-группа: 3;
  -moz-box-порядковая-группа: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  заказ: 2;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 авто;
  -ms-flex: 0 1 авто;
  flex: 0 1 авто;
  -webkit-align-self: авто;
  -ms-flex-item-align: авто;
  align-self: auto;
}
.member label: nth-child (2) {
  -webkit-box-порядковая-группа: 2;
  -moz-box-порядковая-группа: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  заказ: 1;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 авто;
  -ms-flex: 0 1 авто;
  flex: 0 1 авто;
  -webkit-align-self: авто;
  -ms-flex-item-align: авто;
  align-self: auto;
}
.запомнить input [type = checkbox] + label :: before {
  содержание: '';
  дисплей: встроенный блок;
  ширина: 1em;
  высота: 1em;
}
.remember input [type = checkbox]: checked + label :: before {
  содержание: '';
  цвет фона: # 7b519d;
}

  
  
   Запомнить меня

(Обратите внимание, что приведенный выше CSS для демонстрации flexbox был взят более или менее целиком из файла the-echoplex.игровая площадка сети «Flexy Boxes».)

Артикулы:

html — Как выбрать метку для установленного флажка с помощью CSS?

html — Как выбрать метку для установленного флажка с помощью CSS? — Переполнение стека

Спросил
2 года, 9 мес. Назад

Просмотрено
4к раз

Я составляю конструктор строк на стороне сервера (код HTML) и с помощью ajax отправляю ответ функции jquery, которая помещает этот HTML на место.На стороне сервера решается, какой флажок будет отмечен. Все идет нормально.

Я хочу выбрать метки для отмеченных флажков и изменить цвет, чтобы отмеченные страны были окрашены по-разному. Моя проблема в том, что я не могу выбрать нужные метки и изменить свойство цвета. Я пробовал с тем, что вы видите, и, конечно, используя классы и + и > и : до и другие странные вещи …

Итак, как их выбрать и изменить какое-либо свойство на этикетке?

Я хотел бы сделать это с помощью CSS, я знаю, как это сделать с помощью jquery, но это кажется неправильным.

  label + input.chkCountry [type = "checkbox"]: отмечено {color: green;}

  
     Афганистан  
     Албания  
     Алжир  
     Американское Самоа

SuperDJ

6,64088 золотых знаков3636 серебряных знаков6666 бронзовых знаков

Создан 22 янв.

dllhelldllhell

1,96822 золотых знака3434 серебряных знака4747 бронзовых знаков

Вам нужно только изменить HTML и селектор.В CSS метка не знает, установлен ли флажок, поэтому вам нужно перевернуть его. В HTML ввод не должен быть в элементе label .

  input.chkCountry [type = "checkbox"]: отмечено + label {color: green;}
/ * input: checked + label {color: green;} / * Короткий селектор * /

  
  
    
     Афганистан 
  
  
    
     Албания 
  
  
    
     Алжир 
  
     
     Американское Самоа

Создан 22 янв.

SuperDJ

6,64088 золотых знаков3636 серебряных знаков6666 бронзовых знаков

Следуйте приведенному ниже примеру кода

  input [type = "checkbox"]: проверено ~ label {
    цвет: зеленый;
}

  
  
    
     Афганистан 
  
  
    
     Албания

Вам нужно будет переместить метку после флажка в вашем HTML.

Даут

2,11011 золотых знаков1717 серебряных знаков3232 бронзовых знака

Создан 22 янв.

Попробуйте так:

 .chkCountry: checked + .lblCountry {
  цвет: зеленый;
}

  
  
    
     Афганистан 
  
  
    
     Албания  
  
    
     Алжир  
  
    
     Американское Самоа

Создан 22 янв.

Парфо63

2,998 22 золотых знака1919 серебряных знаков3232 бронзовых знака

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css html или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

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

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

Флажок и радиоэлементы могут быть включены или выключены пользователем.

Версия¶

HTML Living Standard

HTML5

Селекторы уровня 4

Синтаксис¶

 : проверено {
  объявления css;
}

В следующем примере установите флажок, чтобы увидеть, как это работает.

Пример селектора: checked с тегом

: ¶

  

  
     Название документа 
    <стиль>
      div {
        маржа: 10 пикселей;
        размер шрифта: 20 пикселей;
      }
      input: checked + label {
        цвет: # 000;
      }
      input [type = "radio"]: проверено {
        тень коробки: 0 0 0 4px # 8ebf42;
      }
        
        input [type = "checkbox"]: проверено {
        тень коробки: 0 0 0 3px # 1c87c9;
      }
    
  
  
    : пример проверенного селектора 
    
      
       Да 
      
       Нет 
    
    
      
       Проверить!

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

Пример селектора: checked с тегами

Столбец 1	Столбец 2	Столбец 3
,	: ¶ Название документа <стиль> table, tr, th, td { граница: 1px solid #ccc; выравнивание текста: центр; граница-коллапс: коллапс; отступ: 8 пикселей; } #переключать { дисплей: нет; } .расширяемый { видимость: коллапс; фон: # 1c87c9; } #btn { дисплей: встроенный блок; маржа сверху: 15 пикселей; отступ: 10 пикселей 20 пикселей; цвет фона: # 8ebf42; цвет: #fff; курсор: указатель; радиус границы: 3 пикселя; } #toggle: checked ~ * .expandable { видимость: видимая; } #toggle: проверено ~ #btn { цвет фона: #ccc; } :: пример проверенного селектора <таблица>
[еще текст]	[еще текст]	[еще текст]
[текст]	[текст]	[текст]
[еще текст]	[еще текст]	[еще текст]
[текст]	[текст]	[текст]
[еще текст]	[еще текст]	[еще текст]

Нажмите здесь!

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

Пример селектора: checked: ¶

  

  
     Название документа 
    <стиль>
      input [type = checkbox] {
        вертикальное выравнивание: по центру;
      }
      input [type = checkbox] + label {
        цвет: # 999999;
        стиль шрифта: нормальный;
      }
      input [type = checkbox]: checked + label {
        цвет: # 8ebf42;
        стиль шрифта: курсив;
        font-weight: жирный;
      }
    
  
  
    : пример проверенного селектора 
    <форма>
      
       Вот пример CSS.

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

Итак, псевдокласс: checked можно использовать для повышения доступности форм и создания интерактивных виджетов со скрытыми входами и их видимыми метками.

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

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта.Принимаю

флажков, настроенных с помощью CSS — AcceDe Web

Резюме

Принцип

Флажки — это элементы формы, которые используются для выбора одной или нескольких опций из группы опций.

Флажки

«настраиваются с помощью CSS», когда они создаются с использованием стандартного HTML-кода для переключателей, как указано в спецификации , но стандартные переключатели визуально скрыты и заменены изображениями CSS, иконочные шрифты или определенные стили.

Есть несколько способов добиться этого. В приведенном ниже примере показано, как имитировать поведение стандартных флажков HTML по умолчанию с помощью псевдоэлементов CSS и фоновых изображений, обеспечивая при этом их доступность.

Базовая основа HTML

  <набор полей>
   Вопрос 
    
      
        
         Ответ 1 
      
      
        
         Ответ 2 
      
      […]

База CSS

  этикетка {
  положение: относительное;
  заполнение: 0 0 0 2rem;
}

input [type = checkbox] {
  позиция: абсолютная;
  непрозрачность: 0;
}

input [type = checkbox] + label :: before,
input [type = checkbox] + label :: after {
  содержание: '';
  позиция: абсолютная;
  дисплей: встроенный блок;
}

input [type = checkbox] + label :: before {
  осталось: 0.5рем;
  верх: 0,15 бэр;
  ширина: 0,9 бэр;
  высота: 0,9 бэр;
  окантовка: сплошной черный 0,05 бэр;
  фон: белый;
}

input [type = checkbox]: checked + label :: after {
  слева: 0,6 бэр;
  верх: 0,28 бэр;
  высота: 0,8 бэр;
  граница слева: сплошной черный 0,8 берм;
}

input [type = checkbox]: focus + label :: before {
  контур: 0,05 бэр, пунктирный;
}

Демо

для отмеченной метки переключателя с использованием JavaScript / jQuery — Techie Delight

В этом посте будет обсуждаться, как добавить селектор CSS для метки отмеченного переключателя или отмеченного флажка с помощью JavaScript и jQuery.

Чтобы применить стиль CSS к метке отмеченного переключателя или отмеченного флажка, вы можете использовать селектор псевдокласса CSS: checked с соседним одноуровневым комбинатором (+).

Селектор псевдокласса CSS: checked соответствует любому отмеченному / выбранному переключателю, флажку или элементу параметра.
Соседний одноуровневый комбинатор принимает два селектора, которые являются потомками одного и того же родителя, и сопоставляет второй элемент, если он идет сразу после первого элемента.Его синтаксис:
first_element + second_element {style}

1. Радиокнопка

Для переключателя вы можете использовать селектор input [type = "radio"]: checked + label , который соответствует метке, которая следует непосредственно за отмеченным входом типа radio.

CSS

input [type = «radio»]: отмечено + label {

font-weight: bold;

}

HTML

Выберите предпочтительный способ связи:

Электронная почта

Телефон

Редактировать в JSFiddle

2.Флажок

Для флажка вы можете использовать селектор input [type = "checkbox"]: checked + label , который соответствует метке, которая сразу же следует за флажком отмеченного ввода типа.

CSS

input [type = «checkbox»]: отмечено + label {

font-weight: bold;

}

HTML

Выберите предпочтительный способ связи:

Электронная почта

Телефон

Редактировать в JSFiddle

В качестве альтернативы вы можете использовать : checked + label , который совпадает с метками как переключателя, так и флажка, который отмечен.

: отмечено + метка {

font-weight: bold;

}

3. Выпадающий

Для раскрывающегося списка вы можете использовать опцию : отмечен селектор , который соответствует выбранным элементам опций.

CSS

option: checked {

font-weight: bold;

}

HTML

Выберите предпочтительный способ связи:

Редактировать в JSFiddle

Это все о селекторе CSS для отмеченной метки переключателя с использованием JavaScript и запросов.

Спасибо за чтение.

Используйте наш онлайн-компилятор для публикации кода в комментариях с использованием C, C ++, Java, Python, JavaScript, C #, PHP и многих других популярных языков программирования.

Нам нравится? Направляйте нас к своим друзьям и помогайте нам расти. Счастливое кодирование 🙂

: проверено — CSS — W3cubDocs

Селектор псевдокласса CSS : checked представляет любой radio ( ), checkbox ( ) или option ( в элементе Да Нет




  
   Проверь меня! 



  CSS 
 div,
Выбрать {
  маржа: 8 пикселей;
}

/ * Ярлыки для отмеченных входов * /
input: checked + label {
  красный цвет;
}

/ * Радиоэлемент, если отмечен * /
input [type = "radio"]: проверено {
  box-shadow: 0 0 0 3px оранжевый;
}

/ * Элемент флажка, если установлен * /
input [type = "checkbox"]: проверено {
  box-shadow: 0 0 0 3px hotpink;
}

/ * Элементы опций, если выбраны * /
option: checked {
  box-shadow: 0 0 0 3px лайм;
  красный цвет;
}
 
 Результат 
 Переключение элементов со скрытым флажком 
 В этом примере используется псевдокласс : checked , чтобы пользователь мог переключать контент в зависимости от состояния флажка, и все это без использования JavaScript.
 HTML 
 

<таблица>
  
      Столбец №1   Столбец №2   Столбец №3  
  
  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
      [текст ячейки]   [текст ячейки]   [текст ячейки]  
      [текст ячейки]   [текст ячейки]   [текст ячейки]  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
      [дополнительный текст]   [дополнительный текст]   [дополнительный текст]  
  


 Переключить скрытые строки 
 
 CSS 
 / * Скрыть флажок переключения * /
# expand-toggle {
  дисплей: нет;
}

/ * Скрыть расширяемое содержимое по умолчанию * /
.расширяемый {
  видимость: коллапс;
  фон: #ddd;
}

/ * Стиль кнопки * /
# expand-btn {
  дисплей: встроенный блок;
  маржа сверху: 12 пикселей;
  отступ: 5 пикселей 11 пикселей;
  цвет фона: # ff7;
  граница: сплошная 1px;
  радиус границы: 3 пикселя;
}

/ * Показывать скрытый контент при установленном флажке * /
# expand-toggle: проверено ~ * .expandable {
  видимость: видимая;
}

/ * Стиль кнопки, когда флажок установлен * /
# expand-toggle: проверено ~ # expand-btn {
  цвет фона: #ccc;
} 
 Результат 
 Галерея изображений 
 Псевдокласс : checked  можно использовать для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда пользователь щелкает миниатюру.См. Эту демонстрацию для возможной подсказки.
  Примечание:  Для аналогичного эффекта, но на основе псевдокласса : hover  и без скрытых радиобоксов, см. Эту демонстрацию, взятую со справочной страницы: hover.
 Характеристики 
 Настольный
 Хром  Кромка  Firefox  Internet Explorer  Opera  Safari
 : проверен  1
 1
 В macOS стиль  12
 12
 В macOS стиль  1
 1
 Из Firefox 56, 
 В macOS стиль  9  9
 9
 В macOS стиль  3,1
 3,1
 Стиль 
 мобильный
 Android веб-просмотр  Chrome для Android  Firefox для Android  Opera для Android  Safari на iOS  Samsung Интернет
 : проверен  2  18  4
 4
 Из Firefox 56,  10,1  3,1
 3,1
 Стиль  1,0
 См. Также 
: проверено - Codrops 
 Элементы Radio (  ) и checkbox (  ) могут переключаться пользователем. Некоторые пункты меню «отмечены», когда пользователь выбирает их.Когда такие элементы включены, применяется псевдокласс : checked .
 Итак, : проверено  используется для выбора и стиля флажка (  ), радио (  ) или опции ( в   ), которые проверяются или включаются пользователем.
 Следующие переключатели и флажки можно включать и выключать.
Посмотреть эту демонстрацию на игровой площадке Codrops
 Он также используется для выбора радио и флажков, для которых  проверено, атрибут  явно установлен автором, или для выбора параметров, для которых  selected  атрибут явно установлен.
 проверено >
 отмечен >

                 
 Псевдокласс : checked  изначально применяется к этим элементам, но, конечно, пользователь может отключить такие элементы, и в этом случае он больше не будет применяться.
 Общая информация и примечания 
 Элементы радио и флажка могут переключаться пользователем, но иногда они находятся в неопределенном состоянии, когда они не отмечены или не отмечены. Это может быть связано с атрибутом элемента или манипуляциями с DOM. Такие элементы можно стилизовать с помощью псевдокласса : indeterminate .
 Стиль : метки ввода  могут быть очень полезны для того, чтобы сделать эти поля более доступными.Любые визуальные подсказки, которые помогают пользователю различить два состояния, всегда полезны. Например, в следующем примере используется подход, подобный списку дел, для вычеркивания меток, чей флажок установлен.

 Купить молоко 
                 
input [type = "checkbox"]: checked + label {
    текстовое оформление: сквозное;
    цвет: серый;
}
                 
 Установите флажок в следующей демонстрации, чтобы увидеть его в действии.
Посмотреть эту демонстрацию на игровой площадке Codrops
 В дополнение к этому, псевдокласс : checked  можно использовать для имитации обработчиков событий только с помощью CSS. Есть проницательная статья Райана Седдона о том, как стилизовать настраиваемые радиовходы и флажки, в которой представлена замечательная техника: настраиваемые вводы радиоканалов и флажков с помощью CSS. Вы можете прочитать больше об этой технике в статье CSS Click Events здесь, на Codrops.
 Примеры 
 Следующие ниже фрагменты кода стили  для любого  отмеченного или выбранного ввода или выбора.
: checked {
    цвет: зеленый;
}
                 
 В следующих примерах стиль флажка, переключателя и параметров выбора, которые отмечены и выбраны, соответственно, с помощью селекторов атрибутов CSS.
input [type = "checkbox"]: проверено {
    ширина: 20 пикселей;
    высота: 20 пикселей;
}

input [type = "radio"]: проверено {
    цвет: зеленый;
}

option: checked {
    цвет фона: синий;
    цвет белый;
}
                 
 Живая демонстрация 
 Переключите отмеченное и выбранное состояние флажков, переключателей и выберите параметры в следующей демонстрации, чтобы увидеть их : проверено  стилей, примененных (и удаленных).

	Настольный
`: проверен`	1 1 В macOS стиль	12 12 В macOS стиль	1 1 Из Firefox 56, `В macOS стиль`	9	9 9 В macOS стиль	3,1 3,1 Стиль

	мобильный
`: проверен`	2	18	4 4 Из Firefox 56,	10,1	3,1 3,1 Стиль	1,0

Category Css