Атрибут checked
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
HTML5 IE Cr Op Sa Fx
Тег INPUT, атрибут checked С какими операционными системами вы знакомы?
Windows 95/98 Windows 2000 System X Linux X3-DOS
Результат данного примера показан на рис. 1.
Рис. 1. Помеченный флажок в форме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
CSS стилизация checkbox и radio — 2 варианта
Как осуществляется создание кастомного чекбокса или переключателя
Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .
Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .
В HTML связывание label с input выполняется одним из 2 способов:
1. Посредством помещения элемента input в label :
2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .
В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.
Создание стильного чекбокса
Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.
Шаг 1. Создадим разметку.
При создании разметки очень важно соблюдать последовательность расположения элементов. Это необходимо, потому что в зависимости от того, как они расположены мы будем составлять выражения для выбора элементов в CSS и назначать им стили.
В этом примере элемент label расположен после input . Связь label с input осуществляется посредством соответствия значения for элемента label с id элемента input .
В примере к элементу input добавлен класс custom-checkbox . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент input с type=»checkbox» .
Шаг 2. Напишем стили для скрытия стандартного элемента input .
.custom-checkbox { position: absolute; z-index: -1; opacity: 0; }Мы не будем использовать display: none , а установим ему стили, с помощью которых уберём его из потока ( position: absolute ), поместим его ниже существующих элементов ( z-index: -1 ), а также сделаем его полностью прозрачным ( opacity: 0 ). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox или radio , когда он будет находиться в нём.
Шаг 3. Создадим поддельный чекбокс.
.custom-checkbox+label { display: inline-flex; align-items: center; user-select: none; } .custom-checkbox+label::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }Создание «поддельного» чекбокса выполним с помощью псевдоэлемента ::before . Посредством CSS зададим ему размеры (в данном случае 1em x 1em ), а затем нарисуем его с помощью border: 1px solid #adb5bd . Свойства начинающие со слова background будут определять положение самого флажка (когда checkbox будет в состоянии checked ).
Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.
Шаг 4. Создадим стили при нахождении элемента в состоянии checked .
.custom-checkbox:checked+label::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }В этом коде при получении элементом состояния checked применим к псевдоэлементу ::before находящемуся в label стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.
Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях hover , active , focus и disabled .
/* стили при наведении курсора на checkbox */ .custom-checkbox:not(:disabled):not(:checked)+label:hover::before { border-color: #b3d7ff; } /* стили для активного состояния чекбокса (при нажатии на него) */ .custom-checkbox:not(:disabled):active+label::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox:focus+label::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox:focus:not(:checked)+label::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox:disabled+label::before { background-color: #e9ecef; }Разработка кастомного переключателя
Стилизация переключателя ( input с type=»radio» ) выполняется аналогично, т.е. посредством тех же шагов которые мы применяли при кастомизации чекбокса.
Итоговый набор стилей для кастомного оформления input с type=»radio» :
Ещё примеры по кастомизации checkbox и label
В этом разделе представлены следующие примеры:
- оформление чекбокса, когда input расположен в label
- оформление переключателя, когда input расположен в label
1. Стилизация checkbox, когда input расположен в label .
/* для элемента input c type="checkbox" */ .custom-checkbox>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label, связанного с .custom-checkbox */ .custom-checkbox>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-checkbox>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на checkbox */ .custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активного чекбокса (при нажатии на него) */ .custom-checkbox>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии checked */ .custom-checkbox>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox>input:disabled+span::before { background-color: #e9ecef; }2. Стилизация radio , когда input расположен в label .
/* для элемента input c type="radio" */ .custom-radio>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label связанного с .custom-radio */ .custom-radio>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-radio>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 50%; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на радио */ .custom-radio>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активной радиокнопки (при нажатии на неё) */ .custom-radio>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для радиокнопки, находящейся в фокусе */ .custom-radio>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */ .custom-radio>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для радиокнопки, находящейся в состоянии checked */ .custom-radio>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } /* стили для радиокнопки, находящейся в состоянии disabled */ .custom-radio>input:disabled+span::before { background-color: #e9ecef; }Как сделать checkbox активным
Загрузка. Пожалуйста,
подождите.
Здравствуйте, Гость ( Вход | Регистрация | Что даёт регистрация на форуме? )
Профиль
Группа: Awaiting Authorisation
Сообщений: 260
Регистрация: 27.7.2009
Где: Геленджик
Репутация: -1
Всего: -16
Есть форма в которой 4 checkbox
Как решить непростую задачку?
а теперь самое главное.
Как сделать так чтобы пользователь мог сделать все checkbox активными.
А если он начинал делать НЕ активными то 1 checkbox всегда оставался активным.
Любой 1 из 4 checkbox всегда оставался активным
Профиль
Группа: Участник
Сообщений: 57
Регистрация: 9.12.2011
Где: нигде
Репутация: нет
Всего: 1
| Цитата(savmp @ 16.3.2012, 18:34 ) |
| как сделать так, чтобы по умолчанию был включён |
| Цитата(savmp @ 16.3.2012, 18:34 ) |
| А если он начинал делать НЕ активными то 1 checkbox всегда оставался активным. |
Профиль
Группа: Awaiting Authorisation
Сообщений: 260
Регистрация: 27.7.2009
Где: Геленджик
Репутация: -1
Всего: -16
| Цитата(savmp @ 16.3.2012, 18:34 ) |
| как сделать так, чтобы по умолчанию был включён |
| Цитата(savmp @ 16.3.2012, 18:34 ) |
| А если он начинал делать НЕ активными то 1 checkbox всегда оставался активным. |
НЕ!))) один из 4 как минимум должен остаться активным.
затем пользователь может наклацать что ему угодно. но если он начнёт снимать галочки. то 1 любой должен остаться активным
Профиль
Группа: Участник
Сообщений: 949
Регистрация: 23.3.2007
Репутация: 3
Всего: 16
| Код |
|
Это сообщение отредактировал(а) iff — 17.3.2012, 17:00
DOS. Синей пеленой экран заполнил чистый DOS
Мышь. Стала вдруг квадратной, потеряла форму мышь.
Я разбил окно, девяностопятое мастдайное окно,
И поставил DOS, и тогда увидел: Это счастье, — вот оно.
| Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию. |
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | JavaScript: Общие вопросы | Следующая тема » |
[ Время генерации скрипта: 0.1224 ] [ Использовано запросов: 21 ] [ GZIP включён ]
Сделать активным
Всем привет!
Подскажите пожалуйста как сделать активным, тоесть что бы после загрузки страници был отмечен галочкой в браузере!
input type="checkbox" style="float:left;" id="notices-friends" checked="checked"/> input type="checkbox" style="float:left;" id="notices-friends" checked/>
Ни один из примеров не срабатывает!!
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Сделать активным поле ввода текста input[type=text] в скрипте с интерактивным фоновым слоем
Здравствуйте. Нужна такая помощь: У меня на странице сайта имеется фоновая интерактивная заставка.
input type=»checkbox»
Знатоки HTML, прошу помочь с checkbox. Под Firefox 95.0.2 случилась катастрофа, с предыдущими.
Сделать кнопку input type=»submit» круглой
Добрый день. Пожалуйста, поделитесь ссылкой как через CSS изменить цвет и сделать кнопку input.
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
Сообщение от Zazu 
этот вариант должен работать Вот посмотрите
Регистрация: 27.02.2012
Сообщений: 492
Давран, спасибо за помощь, но та косяк в другом был, закрыли тему! Не актуально!
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Input type=color
Как сделать так, чтобы при выборе цвета менялся фон приложения? <body> <input type=color.
Картинка в input type
вопрос такой: есть картинка размером 3000х4000 пикселей.надо вывести ее на страницу для.
Input type=number
Как сделать чтобы стрелки, которые показываются принаведении на инпут и при фокусе, всегда.
input type=’text’ . .
Есть ли возможность в теге <input type=’text’ . > задать возможность или невозможность.