Как сделать красивый чекбокс
Как сделать чекбокс на HTML/CSS
Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.
Демонстрация
Чекбокс на HTML
Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label, внутри которого поле для ввода, текст и элемент span, который предстоит стилизовать.
Тег label служит контейнером для каждого чекбокса, для наглядности я временно задал красную рамку тегу label. Когда мало опыта, это хороший способ, увидеть границы любого тега, чтобы не действовать вслепую.
CSS для чекбокс
Строчный тег label, заменим на блочный (display: block), чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.
.container <
display: block;
user-select: none;
>
Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.
.container input <
opacity: 0;
height: 0;
width: 0;
>
Создаем кастомные чекбоксы. Меняем размеры и цвет фона.
.checkmark <
height: 23px;
width: 22px;
background-color: #eec321;
>
При наведении курсора, делаем цвет фона немного темнее.
.checkmark <
background-color: #ccc678;
>
Для отмеченного чекбокса, задаем другой цвет для фона.
.checkmark <
background-color: #2196f3;
>
Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after.
.checkmark:after <
content: «»;
position: absolute;
display: none;
>
Делаем видимой галочку, только для отмеченных чекбоксов.
.checkmark:after <
display: block;
>
Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS. Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.
Посмотреть код целиком можно на Codepen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Узнайте, как создавать настраиваемые флажки и переключатели с помощью CSS.
По умолчанию:
Настраиваемый флажок:
One Two Three Four
Пользовательские переключатель:
One Two Three Four
Создание настраиваемого флажка
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Hide the browser’s default checkbox */
.container input <
position: absolute;
opacity: 0;
cursor: pointer;
>
/* Create a custom checkbox */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>
/* On mouse-over, add a grey background color */
.container:hover input
.checkmark <
background-color: #ccc;
>
/* When the checkbox is checked, add a blue background */
.container input:checked
.checkmark <
background-color: #2196F3;
>
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after <
content: «»;
position: absolute;
display: none;
>
/* Show the checkmark when checked */
.container input:checked
.checkmark:after <
display: block;
>
Создание пользовательской переключателя
Пример
/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Hide the browser’s default radio button */
.container input <
position: absolute;
opacity: 0;
>
/* Create a custom radio button */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>
/* On mouse-over, add a grey background color */
.container:hover input
.checkmark <
background-color: #ccc;
>
/* When the radio button is checked, add a blue background */
.container input:checked
.checkmark <
background-color: #2196F3;
>
/* Show the indicator (dot/circle) when checked */
.container input:checked
.checkmark:after <
display: block;
>
WEBTEORETIK
Когда человеку тяжело,
это часто означает,
что он идёт к успеху.
Чекбоксы HTML.
Категория: Уроки HTML Просмотров: 4601 Коментариев: 0 Дата: 2017-04-19 Добавил: admin
Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.
Чекбоксы создаются очень просто с помощью все того же тега только атрибут type=»» будет содержать значение checkbox.
И так, создадим пару таких чекбоксов, позволяющих пользователю сделать выбор из предложенных вариантов. Для этого создаем отдельный абзац, в котором создадим сами чекбоксы, где и предложим варианты выбора.
Если вы уже сохранили у себя в редакторе код выше и обновили браузер то у Вас должны были появится четыре чекбокса, которые можно выбрать хоть один, хоть все сразу. В данном варианте при загрузке страницы все чекбоксы пустые, однако бывают ситуации, когда нужно по умолчанию выделить один из них.
Для этого используется все тот же атрибут checked, который изначально отмечает выбранный чекбокс.
Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется disabled, что в переводе с английского означает «отключен». С помощью этого атрибута чекбокс делается не активным и не реагирует на действия пользователя.
В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут disabled, что и сделало область не активной.
Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы select.
Псевдо-checkbox на чистом CSS без фоновых изображений
Как сделать красивый стилизованный чекбокс и при этом не написать ни строчки javascript и не искать иконки.
Вот как выглядит код стилизованного чекбокса:
.pseudocheckbox : :before <
content : » \0 0A0″ ;
display : inline- block ;
box-sizing: border-box;
width : 20px ;
height : 20px ;
background-color : white ;
border : 2px solid #B0B0B0 ;
border-radius: 2px ;
margin-right : 6px ;
vertical-align : baseline ;
text-align : center ;
font-family : Arial, sans-serif ;
font-size : 16px ;
line-height : 16px ;
font-weight : bold ;
color : # 808080 ;
>
Разберем этот код подробно.
Задействуем
Для начала нужно скрыть сам чекбокс:
Селектор соседа и псевдокласс :checked
В CSS есть селектор соседа. Он позволяет применить стили к указанному элементу только в том случае, если прямо перед ним есть некоторый другой элемент. Записывается он с помощью символа + и выглядит, например, вот так:
С помощью подобного выражения можно провернуть одну хитрость: ограничить предшествующие элементы только теми чекбоксами, которые «включены». Это нам позволит сделать псевдокласс :checked :
Стилизуем ::before
: :before — это способ дописать что-то в элемент непосредственно перед его содержимым средствами CSS.
Современные браузеры позволяют стилизовать : :before так же, как это делается для обычных HTML-элементов: задавать размеры и отступы, добавлять границы, фон и т.д. Это позволит нам придать ему вид квадратика с рамкой, похожего на переключатель. Взглянем еще раз на правила для него и разберемся, для чего нужно каждое из них:
.pseudocheckbox : :before <
content : » \0 0A0″ ;
display : inline- block ;
box-sizing: border-box;
width : 20px ;
height : 20px ;
background-color : white ;
border : 2px solid #B0B0B0 ;
border-radius: 2px ;
margin-right : 6px ;
vertical-align : baseline ;
text-align : center ;
font-family : Arial, sans-serif ;
font-size : 16px ;
line-height : 16px ;
font-weight : bold ;
color : # 808080 ;
>
content — свойство, необходимое псевдоэлементу, чтобы он проявился. Достаточно даже пустой строки. Но мы используем неразрывный пробел (об этом будет рассказано ниже). Его шестнадцатеричный код — 00A0 :
Нужно задать нашему «квадратику» ширину и высоту. Чтобы они подействовали, необходимо также указать display : inline- block ; (по умолчанию у : :before — inline ):
Удобней, чтобы ширина и высота рассчитывались с учетом толщины границ:
Которые тут же и укажем вместе с закруглениями для красоты:
И добавим небольшой отступ от текста:
Следует также обратить внимание на выравнивание самого «квадратика» относительно соседнего текста. Одним из подходящих вариантов является выравнивание по базовой линии текста:
В случае самого «квадратика» текстом является неразрывный пробел. Если бы текста внутри не было ( content : «» ), такое выравнивание не подействовало бы. Вот почему в content именно неразрывный пробел, а не пустая строка: выглядят они одинаково, а действуют в данном случае по-разному.
Остальные свойства относятся к переключателю в состоянии «включено».
Состояние «включено» и Unicode-символ «галочка»
Отмеченный переключатель, очевидно, имеет некоторые отличия. Для нас это не проблема, потому что с помощью соседнего селектора можно обращаться не только к самому элементу, но и к его : :before :
Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content :
В результате «галочка» будет вписана во все «квадратики» рядом с отмеченными чекбоксами, чего мы и добивалсь. Однако, не стоит забывать, что технически такая «галочка» — это обычный текстовый символ, который самостоятельно может и не выглядеть ровно так, как надо, и ему нужно ему в этом немного помочь.
Центрируем по горизонтали:
В разных шрифтах символ «галочки» может выглядеть немного по-разному, поэтому для ясности выбираем какой-то один и указываем его явно. Также подбираем размер:
Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height :
line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.
Блог Vaden Pro
Кастомное оформление checkbox и radio кнопок средствами CSS
Знакомство с checkbox и radio
Для раскрытия основной темы этой статьи в первую очередь следует раскрыть понятие checkbox и radio для понимания того, с чем нам надо будет столкнуться при кастомизации.
Checkbox – составляющая часть интерфейса веб-ресурса, вывод которой осуществляется графическим методом. Существует два возможных состояния элемента: выбрано (означает согласие с указанным тезисом или подтверждает предпочтение пользователя к указанному объекту) и не выбрано (передает не согласие и не желание взаимодействия человека с указанными параметрами).
Область взаимодействия пользователя и checkbox традиционно представляется в виде пустого квадрата. При выборе указанного параметра (средством выбора является клик мышкой по активной зоне) квадратик заполняется определенным маркером. Классический вариант этого маркера – галочка. Около флажка указывается информация для выбора, в ее качестве может выступать текст, реже – картинка.
По сути функционал radio не отличается от checkbox. Единственным и главным отличием этих элементов является то, что checkbox позволяет выбрать несколько параметров одновременно из списка предложенных, а radio допускает отмечать только один вариант.
Процесс кастомизации
Суть кастомизации заключается в преобразовании указанного оформления под свой уникальный стиль. Для не опытных верстальщиков этот процесс вызывает множество вопросов и трудностей. Однако сегодня мы покажем, как грамотно переоформить элементы выбора checkbox и radio без использования Java-script кода.
Необходимость в использовании кастомизации переключателей и флажков вызвана с одной стороны особенностями работы браузеров, которые по умолчанию отображают эти элементы по разному, в соответствии со своими стандартными настройкам. Пример отображение одного и того же кода в Chrome и FireFox представлен ниже.
С другой стороны это используется для создания единства стиля сайта, приведения всего оформления ресурса к общему знаменателю.
Пример переработки стандартного оформления в необходимый Вам вид рассмотрен ниже.