:checked
Псевдокласс, который отражает состояние чекбокса или радиокнопки.
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдокласс, который активируется, когда пользователь отмечает чекбокс или выбирает одну из радиокнопок.
С его помощью удобно стилизовать эти элементы в их активном состоянии.
Пример
Скопировать ссылку «Пример» Скопировано
Чекбокс полупрозрачный. Будем менять прозрачность ( opacity ) и цвет текста у чекбокса, когда он отмечен:
Обратный билет Нуженspan>Обратный билетspan> label> input type="checkbox"> span>Нуженspan> label>
Прозрачность в дефолтном состоянии:
input[type="checkbox"],input[type="checkbox"] ~ span opacity: 0.5;>input[type="checkbox"], input[type="checkbox"] ~ span opacity: 0.5; >
Чекбокс становится непрозрачным, когда на него кликнули:
input[type="checkbox"]:checked opacity: 1;>input[type="checkbox"]:checked opacity: 1; >
Текст тоже становится непрозрачным, а цвет меняется на синий:
input[type="checkbox"]:checked ~ span opacity: 1; color: #2E9AFF;>input[type="checkbox"]:checked ~ span opacity: 1; color: #2E9AFF; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После селектора, который выбирает элемент чекбокса или радиокнопки, ставим двоеточие и пишем ключевое слово checked .
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер присваивает чекбоксу или радиокнопке псевдокласс :checked , когда они отмечены. Мы можем использовать это для стилизации элемента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Этот псевдокласс есть только у тех элементов, которые можно отметить: , .
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Очень часто этот класс пригождается, когда вы делаете какой-то нестандартный элемент управления на основе чекбокса или радиокнопок. В этом случае стандартные элементы скрываются, но их поведение, в частности псевдокласс :checked , позволяет что-то переключать вообще без JavaScript.
Например, вот это выпадающее меню реализовано на чистом HTML с использованием трюка в чекбоксом:
.dropdown position: relative;> .dropdown input,.dropdown ul display: none;> .dropdown label cursor: pointer; border-bottom: 3px dashed #2E9AFF;> .dropdown ul position: absolute; left: calc(100% + 25px); top: 50%; transform: translateY(-50%); margin: 0; padding: 40px 10px; list-style: none; background-color: #FFFFFF; font-size: 20px;> .dropdown a color: #000000;> .dropdown :checked ~ label color: #2E9AFF;> .dropdown :checked ~ ul display: inline-block;>.dropdown position: relative; > .dropdown input, .dropdown ul display: none; > .dropdown label cursor: pointer; border-bottom: 3px dashed #2E9AFF; > .dropdown ul position: absolute; left: calc(100% + 25px); top: 50%; transform: translateY(-50%); margin: 0; padding: 40px 10px; list-style: none; background-color: #FFFFFF; font-size: 20px; > .dropdown a color: #000000; > .dropdown :checked ~ label color: #2E9AFF; > .dropdown :checked ~ ul display: inline-block; >
:checked
Псевдокласс :checked применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS-правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (открыть это демо).
doctype html> html> head> meta charset="utf-8" /> title>Расширяемые элементыtitle> style> #expand-btn margin: 0 3px; display: inline-block; font: 12px / 13px "Lucida Grande", sans-serif; text-shadow: rgba(255, 255, 255, 0.4) 0 1px; padding: 3px 6px; border: 1px solid rgba(0, 0, 0, 0.6); background-color: #969696; cursor: default; border-radius: 3px; box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; > #isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn background: #B5B5B5; box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; > #isexpanded, .expandable display: none; > #isexpanded:checked ~ * tr.expandable display: table-row; background: #cccccc; > #isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable display: block; background: #cccccc; > style> head> body> input type="checkbox" id="isexpanded" /> h1>Расширяемые элементыh1> table> thead> tr>th>Колонка #1th>th>Колонка #2th>th>Колонка #3th>tr> thead> tbody> tr class="expandable">td>[текст ячейки]td>td>[текст ячейки]td>td>[текст ячейки]td>tr> tr>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 class="expandable">td>[текст ячейки]td>td>[текст ячейки]td>td>[текст ячейки]td>tr> tbody> table> p>[какой-то текст примера]p> p>label for="isexpanded" id="expand-btn">Показать скрытые элементыlabel>p> p class="expandable">[другой текст для примера]p> p>[какой-то текст примера]p> body> html>
Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS
Также вы можете псевдокласс :checked , чтобы скрывать радиокнопки для того, чтобы создать, например, галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Загрузите это демо как вариант решения.
Примечание: Для аналогично эффекта, но основанного на псевдоклассе :hover (en-US) и без скрытых радиокнопок, смотрите это демо, взятое со страницы :hover (en-US) .
Спецификации
Поддержка браузерами
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on 14 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Поговорим про :checked
В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).
Но обо всём по порядку.
:checked или немного теории
Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input’ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы
Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text» выставленное в readonly), но в большинстве своём они опирались на псевдокласс :target, чьё использование немного неоправданно из-за «прыгающего» контента.
Из-за чего была придумана сверхпростая реализация вкладок при помощи :checked и радиобаттонов.
Дабы не перегружать читателя кодом, я урезал пример с 4 вкладок до 2, полный пример доступен тут
qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году. qutIM 0.2 — Многопротокольный клиент, вышедший в 2010 году. input < display: none; >input:checked + label < background: #CCC; >input:checked + label + input + label + article < /* Страшно? */ display: block; >input:checked + label + article + article < display: block; >article
Сей код лишён всех лишних стилей, дабы не мешать пониманию.
Отдельно хочу сказать, что это лишь пример, что можно сделать при помощи CSS и HTML, ибо использование сего в реальных сайтах затруднительно и вот почему:
Сей код корректно работает в Firefox, Opera, IE9+, но не работает в Webkit-браузерах. а вот тут я немного поспешил.
WebKit не обновляет значение до изменения кода, но его можно принудительно заставить это делать, добавив весьма грязный хак:
section < -webkit-animation: 0.1s hack infinite; >@-webkit-keyframes hack < from to > Анимация, которая ничего не делает. Вебкит не перестаёт удивлять.
Как вы заметили, я неоднократно воспользовался свойством селектора следующего элемента, который, в общем-то, не рекомендуется к использованию по причинам производительности. Но чуть ниже я покажу такое использование этого селектора, что и не снилось.
Немного бреда
А что, если использовать чекбоксы для ввода двоичных чисел?
Берём два чекбокса, располагаем последовательно и делаем что-то вроде:
input + div::after < content: "0"; >input:checked + div::after < content: "1"; >input:checked + input + div::after < content: "2"; >input:checked + input:checked + div::after
Бред? Сумасшествие? Троллейбус.jpg? На самом деле, всего-лишь демонстрация и немного свободного времени.
К слову, за полчаса был написан вот такой небольшой скриптик, генерирующий стиль (Аналогичный вышенаписанному) и строчку из чекбоксов для перевода из двоичной системы в десятеричную 🙂
Немного погодя был написан аналогичный скрипт, генерирующий аналогичный стиль, но для перевода из троичных чисел в десятеричные.
В HTML существуют tri-state чекбоксы, но для их создания требуется javascript (для выставления элементу indeterminate = true), а так же есть псевдокласс :indeterminate по аналогии с :checked.
Разумеется, и речи не идёт где-то это применять вот таким методом. Всё это приводится как информация к размышлению.
А ещё?
Вот здесь можно почитать заметку за авторством kizu про выпадающие менюшки, основанные на том же принципе.