Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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? — Переполнение стека

Спросил

Просмотрено
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 бронзовых знаков

4

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

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

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 с тегами

,

,

,

: ¶
  

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

:: пример проверенного селектора

<таблица>
Столбец 1 Столбец 2 Столбец 3
[еще текст] [еще текст] [еще текст]
[текст] [текст] [текст]
[еще текст] [еще текст] [еще текст]
[текст] [текст] [текст]
[еще текст] [еще текст] [еще текст]

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

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

  

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

: пример проверенного селектора

<форма>

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

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


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

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

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


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

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

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

Резюме

Принцип

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

Флажки

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

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

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

  <набор полей>
   Вопрос 
    
  • […]

База 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 бэр, пунктирный;
}  

Демо

Комментарии

Вернуться наверх

CSS-селектор

для отмеченной метки переключателя с использованием 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 {
    цвет фона: синий;
    цвет белый;
}
                 

Живая демонстрация

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *