Input checked: Атрибут checked | htmlbook.ru

Leave a Comment / Разное / By /

: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 Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
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.

Флажок не работает.

HTML 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 шел сразу после флажка (также вы должны поставить метку перед флажком, а не после него).

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

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