Label css checked: forms — CSS selector for a checked radio button’s label

Leave a Comment / Css / By /

Селектор псевдокласса CSS :checked представляет любое радио (), тип флажка=»checkbox»>), элемент option, который находится в состоянии переключения.

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

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

Проверенный атрибут является логическим атрибутом. Когда он присутствует, он указывает, что элемент <input> должен быть предварительно выбран (проверен) при загрузке страницы. Атрибут checked можно использовать с <input type=»checkbox»> и <input type=»radio»> . Атрибут checked также можно установить после загрузки страницы с помощью JavaScript.

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

Чтобы найти выбранную радиокнопку,выполните следующие действия:Выберите все радиокнопки с помощью метода DOM,например метода querySelectorAll().Получите свойство checked радиокнопки.Если свойство checked равно true,то радиокнопка отмечена;в противном случае она не отмечена.

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

С его помощью можно управлять оформлением сразу нескольких веб-страниц.

просто добавьте к своим флажкам. Затем создайте этот стиль в своем коде css. Вам все равно нужно будет добавить класс, чтобы он работал в IE, и он не будет работать в других браузерах, отличных от IE, которые не поддерживают IE.


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

Try it

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

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

Syntax

:checked

Examples

Basic example

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

Specifications

Specification
HTML Standard
# selector-checked
Селекторы уровня 4
# проверено

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
:checked

1

В macOS стили элементов <option> не работают.

12

В macOS стили элементов <option> не работают.

1

[«Начиная с Firefox 56, элементы <option> не могут быть стилизованы.», «В macOS стилизация элементов <option> не действует.»]

9

9

В macOS стили элементов <option> не работают.

3.1

Стилизация элементов <option> не имеет никакого эффекта.

2

18

4

Начиная с Firefox 56, элементы <option> не могут быть стилизованы.

10.1

2

Стилизация элементов <option> не имеет никакого эффекта.

1.0

See also

  • Веб-формы-работа с данными пользователя
  • Стилизация веб-форм
  • Связанные элементы HTML: <input type="checkbox"> , <input type="radio"> , <select> и <option>
  • Replaced elements
  • 1
  • …
  • 40
  • 41
  • 42
  • 43
  • 44
  • …
  • 865
  • Next


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

Задавать вопрос

спросил

Изменено 3 года, 9 месяцев назад

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

Я создаю построитель строк на стороне сервера (код HTML) и с помощью ajax отправляю ответ функции jquery, которая помещает этот HTML на место.

На стороне сервера решается, какой флажок будет установлен. Все идет нормально.

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

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

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

 метка + input.chkCountry[type="checkbox"]:checked {color:green;} 
 
    
  
    • 
  
    • 
  
    • 
  
    •
  • css
  • html

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

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

4

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

 input[type="checkbox"]:checked ~ label {
    цвет: зеленый;
} 
 <ул>
  
  • 
    
    
  
    • 
  
  • 
    
    
  
    •

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

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

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

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

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

    Требуется, но никогда не отображается

    Опубликовать как гость

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

    Требуется, но не отображается

    html — Выделить метку, если флажок установлен

    спросил

    Изменено 2 месяца назад

    Просмотрено 187 тысяч раз

    Существует ли способ изменения цвета метки без использования JavaScript при установке соответствующего флажка?

    • HTML
    • CSS

    1

    Использовать смежный комбинатор родственных элементов:

     . check-with-label:checked + .label-for-check {
  вес шрифта: полужирный;
} 
     <дел>
  <тип ввода = "флажок" />

    11

    Мне нравится предложение Эндрю, и на самом деле правило CSS должно быть только таким:

     :checked + label {
   вес шрифта: полужирный;
}

    Мне нравится полагаться на неявную ассоциацию метки и элемента ввода , поэтому я бы сделал что-то вроде этого:

     <метка>
   <тип ввода="флажок"/>
   Ба

    с CSS:

     :checked + span {
    вес шрифта: полужирный;
}

    Пример: http://jsfiddle.net/wrumsby/vyP7c/

    1

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

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

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