Css checked: :checked — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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

  • Содержание
    • Синтаксис
    • Пример
    • Спецификация
    • Браузеры

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

Синтаксис 

Селектор:checked { ... }

Примеры использования

input[type="radio"]:checked { ... }

Стиль применяется только ко включенным переключателям.

input[type="checkbox"]:checked { ... }

Стиль применяется только к помеченным флажкам (чекбоксам).

option:checked { ... }

Стиль применяется только к выбранным элементам списка.

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <head> <meta charset=»utf-8″> <title>checked</title> <style> input:checked + span { background: #fc0; } </style> </head> <body> <p><strong>С какими операционными системамы вы знакомы?</strong></p> <p><input type=»checkbox» name=»a1″><span>Windows 7</span><br> <input type=»checkbox» name=»a2″><span>Windows Vista</span><br> <input type=»checkbox» name=»a3″><span>Windows XP</span><br> <input type=»checkbox» name=»a4″><span>System X</span><br> <input type=»checkbox» name=»a5″><span>Linux</span><br> <input type=»checkbox» name=»a6″><span>Mac OS</span></p> <p><input type=»submit» value=»Отправить»></p> </body> </html>

В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :checked

Спецификация

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

912193.11
2.119.53.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Псевдоклассы

Формы

См. также

  • Аккордеон меню
  • Вкладки на CSS
  • Выпадающее меню
  • Использование :checked
  • Спойлер
  • Стилизация переключателей
  • Стилизация флажков

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 16.05.2018

Редакторы: Влад Мержевич

по состоянию checked включать/выключать · GitHub

по состоянию checked включать/выключать

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

css»>
/*
по состоянию checked включать/выключать
соответствующие элементы
http://clck.ru/d/Jxj_mgDC143fZ
*/
label[for=»red»], label[for=»green»], label[for=»blue»]{
margin-right: 35px;
cursor: pointer;
border-bottom: 1px solid red;
}
label[for=»red»]{color: red;}
label[for=»green»]{
border-color: green;
color: green;
}
label[for=»blue»]{
border-color: blue;
color: blue;
}
input[type=»checkbox»]{ display: none }
#red:checked ~ label[for=»red»],
#green:checked ~ label[for=»green»],
#blue:checked ~ label[for=»blue»]
{ font-weight: bold }
#red:checked ~. red,
#green:checked ~.green,
#blue:checked ~.blue{
color: white;
border-radius: 4px;
padding: 0 6px 1px;
-webkit-transition: background 2s ease, color 1s ease
}
#red:checked ~.red{ background: red }
#green:checked ~.green{ background: green }
#blue:checked ~. blue{ background: blue }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

<form>
<div>
<input type=»reset» value=»Reset»>
<input type=»checkbox»>
<input type=»checkbox»>
<input type=»checkbox»>
<label for=»red»>красные</label>
<label for=»green»>зеленые</label>
<label for=»blue»>синие</label>
<span>красные</span>
<span>зеленые</span>
<span>зеленые</span>
<span>красные</span>
<span>синие</span>
<span>зеленые</span>
<span>красные</span>
<span>синие</span>
<span>красные</span>
<span>зеленые</span>
<span>синие</span>
</div>
</form>

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

{«view»:»separate»,»fontsize»:»100″,»seethrough»:»»,»prefixfree»:»1″,»page»:»all»}

:проверено — CSS: Каскадные таблицы стилей. , или

option ( in a
<дел>
<выбрать имя="мой выбор">
CSS 
 раздел,
Выбрать {
  поле: 8px;
}
/* Метки для проверенных входных данных */
ввод: отмечен + метка {
  красный цвет;
}
/* Радиоэлемент, если отмечен */
ввод [тип = "радио"]: отмечен {
  box-shadow: 0 0 0 3px оранжевый;
}
/* Элемент флажка, если он отмечен */
ввод [тип = "флажок"]: отмечен {
  box-shadow: 0 0 0 3px ярко-розовый;
}
/* Элементы option, если они выбраны */
вариант: отмечен {
  box-shadow: 0 0 0 3px лайм;
  красный цвет;
}
Результат

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

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

HTML 
 
<таблица>
  
    
      Столбец №1
      Столбец №2
      Столбец № 3
    
  
  
    
      [подробнее]
      [подробнее]
      [подробнее]
    
    
      [текст ячейки]
      [текст ячейки]
      [текст ячейки]
    
    
      [текст ячейки]
      [текст ячейки]
      [текст ячейки]
    
    
      [подробнее]
      [подробнее]
      [подробнее]
    
    
      [подробнее]
      [подробнее]
      [подробнее]
CSS 
 /* Скрыть флажок переключения */
# развернуть-переключить {
  дисплей: нет;
}
/* Скрыть расширяемый контент по умолчанию */
.расширяемый {
  видимость: коллапс;
  фон: #ддд;
}
/* Стиль кнопки */
#expand-btn {
  отображение: встроенный блок;
  поле сверху: 12px;
  отступ: 5px 11px;
  цвет фона: #ff7;
  граница: сплошная 1px;
  радиус границы: 3px;
}
/* Показывать скрытое содержимое, когда флажок установлен */
#expand-toggle:checked ~ * . expandable {
  видимость: видимая;
}
/* Стиль кнопки при установленном флажке */
#expand-toggle:checked ~ #expand-btn {
  цвет фона: #ccc;
}
Result
Specification
HTML Standard
# selector-checked
Selectors Level 4
# checked

BCD tables only load in the browser

with JavaScript включен. Включите JavaScript для просмотра данных.
  • Веб-формы — работа с пользовательскими данными
  • Стилизация веб-форм
  • Связанные элементы HTML: , , :

    input:checked {
      height: 50px;
      ширина: 50 пикселей;
    }

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

    Другие примеры «Попробуйте сами» ниже.

    Определение и использование

    Селектор :checked соответствует каждому проверенному элементу (только для переключателей и флажков) и элемент

    Версия: CSS3

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

    Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

    Селектор
    : проверено 4,0 9,0 3,5 3,2 9,6

    Синтаксис CSS

    :checked {
      объявления css ;
    } Демонстрация

    Другие примеры

    Пример

    Установите высоту и ширину для всех проверенных элементов

    option:checked {
      height: 100px;
      ширина: 100 пикселей;
    }

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

    Связанные страницы

    Справочник по селектору CSS: CSS :disabled selector

    Справочник по селектору CSS: CSS :enabled selector

    ❮ Назад Справочник по селекторам CSS Далее ❯


    NEW

    Мы только что запустили
    Видео W3Schools

    Узнать

    COLOR PICKER
    КОД ИГРЫ

    Играть в игру

    Лучшие учебники
    Учебник по HTML
    Учебник по CSS
    Учебник по JavaScript
    Учебник How To
    Учебник по SQL
    Учебник по Python
    Учебник по W3. CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery 
     9008 Справочник 
     9008
Справочник по HTML 
     Справочник по CSS 
     Справочник по JavaScript 
     Справочник по SQL 
     Справочник по Python 
     Справочник по W3.CSS 
     Справочник по Bootstrap 
     Справочник по PHP 
     Цвета HTML 
     Справочник по Java 
     Справочник по Angular 
     Справочник по jQuery 
     Основные примеры 
     Примеры HTML 
     Примеры CSS 
     Примеры JavaScript 
     Примеры инструкций 
     Примеры SQL 
     Примеры Python 
     Примеры W3.CSS 
     Примеры Bootstrap 
     Примеры PHP 
     Примеры Java 
     Примеры XML 
     Примеры jQuery 
     23
    2 FORUM |
 О
     W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.