:checked ⚡️ HTML и CSS с примерами кода
Псевдокласс :checked
находит любые элементы radio
(<input type="radio">
), checkbox
(<input type="checkbox">
) или option
(<option>
внутри <select>
), которые выбраны или включены.
Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked
повторно не применится к элементу, а сохранится.
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис
/* Matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; }
Спецификации
- HTML Living Standard
- HTML 5
- Selectors Level 4
- CSS Basic User Interface Module Level 3
- Selectors Level 3
Описание и примеры
Пример 1
HTMLCSS
<div> <input type="radio" name="my-input" /> <label for="yes">Yes</label> <input type="radio" name="my-input" /> <label for="yes">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>
div, select { margin: 8px; } /* Labels for checked inputs */ input:checked + label { color: red; } /* Radio element, when checked */ input[type='radio']:checked { box-shadow: 0 0 0 3px orange; } /* Checkbox element, when checked */ input[type='checkbox']:checked { box-shadow: 0 0 0 3px hotpink; } /* Option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; }
Пример 2: переключение элементов со скрытым флажком
В этом примере используется псевдо-класс :checked
, чтобы пользователь мог переключать контент на основе состояния флажка, без использования JavaScript.
HTMLCSS
<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>
/* Hide the toggle checkbox */ #expand-toggle { display: none; } /* Hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* Style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* Show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* Style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; }
html — Применить новые стили если checkbox:checked
Имеется вот такая разметка:
<div> <span>КОЛИЧЕСТВО ПЕРЕСАДОК</span> <label><span></span><input type="checkbox" name="all" checked="">Все</label> <label><span></span><input type="checkbox" name="1">1 пересадка</label> <label><span></span><input type="checkbox" name="2">2 пересадки</label> <label><span></span><input type="checkbox" name="3">3 пересадки</label> </div>
И следующий стиль у span внутри label:
tickets-transplans__checkbox { width: 20px height: 20px background-image: url('../img/Form.png') }
Я хочу менять фон на Form2.png, если input:checked. Как мне правильно написать стили?
Я пробовал вот так, но ничего не выходит:
.tickets-transplants > label > input:checked + .tickets-transplants__checkbox width: 20px height: 20px background-image: url('../img/Checkbox.png')
- html
- css
- sass
При той разметке, что в вопросе, без JS не обойтись, так как в CSS, сначала идёт управляющий элемент, а затем (рядом, но ниже или глубже) управляемые. Поэтому нужно поменять местами <input>
и <span>
:
.tickets-transplants>label { position: relative; } .tickets-transplants>label>input { opacity: 0; } .tickets-transplants>label>.tickets-transplants__checkbox { position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; background-color: #aaf; } .tickets-transplants>label>input:checked+.tickets-transplants__checkbox { background-color: #faa; }
<div> <span>КОЛИЧЕСТВО ПЕРЕСАДОК</span> <label><input type="checkbox" name="all" checked=""><span></span>Все</label> <label><input type="checkbox" name="1"><span></span>1 пересадка</label> <label><input type="checkbox" name="2"><span></span>2 пересадки</label> <label><input type="checkbox" name="3"><span></span>3 пересадки</label> </div>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Проверка ввода HTML Атрибут
❮ Тег HTML
Пример
HTML-форма с предварительно установленным флажком:
php»>Попробуйте сами »
Определение и использование
Атрибут checked
логический атрибут.
При наличии указывает, что элемент
должен быть предварительно выбран (проверен) при загрузке страницы.
Атрибут проверенного
может использоваться с
и
.
Атрибут checked
также можно установить после загрузки страницы с помощью JavaScript.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.
Атрибут | |||||
---|---|---|---|---|---|
проверено | Да | Да | Да | Да | Да |
Синтаксис
<ввод проверен>
❮ HTML-тег <ввод>
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

Bootstrap Reference
PHP Reference
Java Reference
Angular Reference
jQuery Reference
8 Top3 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Флажок не работает.

спросил
Изменено 2 года, 2 месяца назад
Просмотрено 3к раз
Я создаю скользящую панель навигации, используя метод флажка.
[Но только для демонстрационных целей я меняю фон на «синий»]
Я использовал метку, и если флажок установлен, его фон меняется на «синий». Но это не работает
Пожалуйста, объясните почему????
[см. код на https://codepen.io/adi45code/pen/abmxgQj]
HTML
<тип ввода="флажок"/>ГлавнаяО насСервисЦелиСвяжитесь с нами
CSS
.position-right { flex-направление: столбец; фон: #000000; ширина: 50%; высота: 200 пикселей; выравнивание текста: по центру; переход: все .2s; положение: абсолютное; слева: -10px; красный цвет; } #checkbox:checked +.position-right { фон: синий; } диапазон, ввод { положение: абсолютное; справа: 0; отступ: 10 пикселей; } вход{ верх: 30 пикселей; } диапазон: наведите { красный цвет; }
- HTML
- CSS
- флажок
- navbar
- ischecked
Проблема в том, что селектор ,+, нацелен только на следующего родственного элемента элемента слева от селектора ,+, (в вашем случае, на ваш флажок).
И поскольку метка
является следующей сестрой вашего флажка, ваш код не будет работать.
Все, что вам нужно сделать, это заменить позиции вашего div
и вашего флажка
, чтобы div
шел сразу после флажка (также вы должны поставить метку перед флажком, а не после него).