Css стилизация чекбоксов: CSS стилизация checkbox и radio — 2 варианта

Leave a Comment / Css / By /

Стилизация checkbox и radio на CSS · GitHub

label
input(type=»checkbox»).checkbox
span.checkbox-custom
span.label AGB
===
.checkbox
display: none
/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
.checkbox-custom
position: relative // Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */
width: 20px // Обязательно задаем ширину */
height: 20px // Обязательно задаем высоту */
border: 2px solid #ccc
border-radius: 3px
. checkbox-custom,
.label
display: inline-block
vertical-align: middle
/* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */
.checkbox:checked + .checkbox-custom::before
content: «» //* Добавляем наш псевдоэлемент */
display: block // Делаем его блочным элементом */
position: absolute //* Позиционируем его абсолютным образом */
/* Задаем расстояние от верхней, правой, нижней и левой границы */
top: 2px
right: 2px
bottom: 2px
left: 2px
background: #413548 //* Добавляем фон. Если требуется, можете поставить сюда картинку в виде «галочки», которая будет символизировать, что чекбокс отмечен */
border-radius: 2px
****
<label>
<input type=»radio» name=»radio-test»>
<span></span>
<span>Lorem ipsum dolor sit amet, consectetur</span>
</label>
===
. checkbox,
.radio {
display: none;
}
.checkbox-custom,
.radio-custom {
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 3px;
position: relative;
}
.checkbox-custom,
. radio-custom,
.label {
display: inline-block;
vertical-align: middle;
}
.checkbox:checked + .checkbox-custom::before,
.radio:checked + .radio-custom::before {
content: «»;
display: block;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
background: #413548;
border-radius: 2px;
}
.
radio-custom,
.radio:checked + .radio-custom::before {
border-radius: 50%;
}
//https://webcareer.ru/stilizaciya-checkbox-i-radio-na-css.html

Картинка вместо чекбокса | htmlbook.ru

Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.

Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).

Рис. 1. Вверху чекбокс выключен, внизу он включен

Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.

HTML

После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Первый это тег <label>, он создаёт вокруг чекбокса невидимую рамку, щелчок внутри которой включает или выключает галочку в чекбоксе. Его наличие позволяет не щёлкать непосредственно по чекбоксу, размеры которого довольно малы, а щёлкать за пределами чекбокса. При этом всё будет работать именно так, как нам и нужно, даже несмотря на то, что по самой галочке мы не попали.

Далее идёт сам чекбокс (<input type=»checkbox»>) со всеми желаемыми параметрами. Здесь никаких ограничений нет, вставляйте в тег любые необходимые атрибуты.

После <input> следует пустой <span>, этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.

CSS

Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label.

label {
 width: 32px; /* Ширина рисунка */
 height: 26px; /* Высота рисунка */
 display: block; /* Блочный элемент */
 position: relative; /* Относительное позиционирование */
}

Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» <span>.

Важно сделать чтобы элемент занимал всю доступную область внутри <label>. Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя. Заодно смещаем элемент в левый верхний угол.

input[type="checkbox"] + span {
 position: absolute; /* Абсолютное позиционирование */
 left: 0; top: 0;
 width: 100%; height: 100%;
 background: url(images/switch.png) no-repeat; /* Фоновый рисунок */
 cursor: pointer; /* Курсор в виде руки */
}

Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.

На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span.

Поэтому используем соседние селекторы и добавляем стиль к span идущему после чекбокса с галочкой.

input[type="checkbox"]:checked + span  	{
 background-position: 0 -26px;
}

Надеюсь, теперь стало понятно такое положение <span> в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked.

Собираем код воедино (пример 1) и тестируем его в браузерах.

Пример 1. Картинка вместо чекбокса

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатель</title>
  <style>
   label {
    width: 32px;
    height: 26px;
    display: block;
    position: relative;
   }
   input[type="checkbox"] + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(images/switch.png) no-repeat;
    cursor: pointer;
   }
   input[type="checkbox"]:checked + span {
    background-position: 0 -26px; 
   }
  </style>
 </head>
 <body>
  <form>
   <label><input type="checkbox" value="1" name="k"><span></span></label>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Браузеры

Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.

Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).

Пример 2. Стиль для IE8

<!--[if lt IE 9]>
 <style>
  label.switch {width: auto; height: auto; }
  span.switch { display: none !important; }
 </style>
<![endif]-->

Данный код надо вставить сразу после закрывающего тега </style> в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.

CSS3формы

CSS по теме

  • Псевдокласс :checked

Настройка флажков и переключателей с помощью CSS: Whiteley Designs

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

На самом деле нет никаких вариантов стилизации самих входных данных, но мы обойдем это, используя ::before и ::after псевдоэлементов для создания иллюзии красиво настроенных галочек или радиовходов.

Вот наш окончательный результат:

Какой твой любимый вид спорта?

Отметьте подходящие ответы:

Бейсбол

Баскетбол

Футбол

Хоккей

Футбол

Какой твой любимый вид спорта?

Выберите один:

Бейсбол

Баскетбол

Футбол

Хоккей

Футбол

Настройка

Сначала нам понадобятся некоторые основные входные данные для работы. Приведенный ниже HTML-код дает нам очень простые поля ввода радио и флажков с одноуровневыми метками, каждая из которых заключена в div.

Примечание. Разметка может различаться в зависимости от вашего приложения, поэтому вам потребуется изменить ее по мере необходимости. Например, если вы делаете это с Gravity Forms, вам нужно настроить таргетинг на элементы списка, выводимые каждым полем. 

 <дел>

Этот базовый HTML-код повторяется для каждого флажка, а также для каждого радио-ввода с небольшими изменениями для переключения ввода на радио. Вот полная разметка для приведенного выше примера:

 

     <дел>
          
Какие ваши любимые виды спорта?

          
Отметьте подходящие ответы:

          <дел>
<дел>
<дел>
<дел>