Radio css оформление. Изменение радио кнопок с помощью CSS
Последнее обновление: 08.04.2016
Флажок
Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input с атрибутом type="checkbox" :
Изучаемые технологии
Атрибут checked позволяет установить флажок в отмеченное состояние.
Переключатели
Переключатели или радиокнопки похожи на флажки, они также могут находиться в отмеченном или неотмеченном состоянии. Только для переключателей можно создать одну группу, в которой одновременно можно выбрать только один переключатель. Например:
Для создания радиокнопки надо указать атрибут type="radio" . И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech . Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:
Важное значение играет атрибут value , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен.
Всем доброго времени суток!Кастомизация элементов форм наверное одно из самых увлекательных занятий в Веб-дизайне. Оправданное ли это занятие решает каждый для себя сам, хотя очевидно, что в наше время дизайнеры и верстальщики все же уделяют этому свои силы и время.
К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.
Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform , надеюсь будет полезной эта статья.
Поехали!
Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform , но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.Основная идея строится на нативном «умении» HTML тега label устанавливать связь с определенным элементом формы. Собственно и все, дальше только код.
Разметка
<ul >
<li >
<input id = "cfirst" type = "checkbox" name = "first" checked hidden / >
<label for = "cfirst" > Checked checkbox</ label >
</ li >
<li >
<input id = "csecond" type = "checkbox" name = "second" hidden / >
<label for = "csecond" > Unchecked checkbox</ label >
</ li >
<li >
<input id = "cthird" type = "checkbox" name = "third" hidden disabled / >
<label for = "cthird" > Disabled checkbox</ label >
</ li >
<li >
<input id = "clast" type = "checkbox" name = "last" checked hidden disabled / >
<label for = "clast" > Disabled checked checkbox</ label >
</ li >
</ ul >
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" checked hidden / >
<label for = "rfirst" > Checked radio</ label >
</ li >
<li >
<input id = "rsecond" type = "radio" name = "radio" hidden / >
<label for = "rsecond" > Unchecked radio</ label >
</ li >
<li >
<input id = "rthird" type = "radio" name = "radio" hidden disabled / >
<label for = "rthird" > Disabled radio</ label >
</ li >
</ ul >
Совершенно нативная разметка. Использование label вместе с input прям как из учебников. Важным моментом является только то, что нужно указывать id для каждого input и for для label , чтобы связать их.
Думаю все заметили использование атрибута hidden , который скрывает сами input элементы, однако благодаря связи с label , мы все еще может манипулировать ими. В результате мы получаем что-то вроде:
Скучно совсем стало, но все работает. Теперь осталось оформить все это добро как надо. Для этого воспользуемся спрайтом , который применяется на сайте Uniform .
Оформление
input[ type= "checkbox" ] ,
input[ type= "radio" ] {
display : none ;
}
input[ type= "checkbox" ] + label,
input[ type= "radio" ] + label {
font : 18px bold ;
color : #444 ;
cursor : pointer ;
}
input[ type= "checkbox" ] + label: :before ,
content : "" ;
display : inline-block ;
height : 18px ;
width : 18px ;
margin : 0 5px 0 0 ;
background-image : url (uniformjs.com/images/sprite.png ) ;
background-repeat : no-repeat ;
}
input[ type= "checkbox" ] + label: :before {
background-position : -38px -260px ;
}
input[ type= "radio" ] + label: :before {
background-position : 0px -279px ;
}
input[ type= "checkbox" ] :checked + label: :before {
background-position : -114px -260px ;
}
input[ type= "radio" ] :checked + label: :before {
background-position : -108px -279px ;
}
input[ type= "checkbox" ] :disabled + label: :before {
background-position : -152px -260px ;
}
input[ type= "checkbox" ] :checked :disabled + label: :before {
background-position : -171px -260px ;
}
input[ type= "radio" ] :disabled + label: :before {
background-position : -144px -279px ;
}
input[ type= "radio" ] :checked :disabled + label: :before {
background-position : -162px -279px ;
}
Тут все так же максимально просто. Используем псевдо-элемент before для того, чтобы показывать наши «виртуальные контролы» и пользователь не заметил подмены. Части спрайта, меняем в зависимости от состояния input "а.
В результате получаем что-то вроде:
Часто бывает нужно сделать так, что бы какие-то html элементы имели нестандартный вид.
Раньше для этого мастерили много JavaScript кода, который делал нужные подмены. Теперь же можно на чистом CSS это все организовать. Причем работоспособность гарантированна во всех современных браузерах.
Для чего это нам может понадобиться? Вариантов применения масса от красивого меню до выбора необходимых опций у товаров для подсчета цены. Например берем аренда авто Харьков и для каждой машины делаем возможность выбрать, необходимые в аренде авто, опции. И красиво и пользователю удобно как со стационарного компьютера так и с мобильного устройства.
Итак, нам необходимо сделать отображение стандартных input radio в виде стилизированных кнопок.
Создаем небольшой файл стилей:
Radio_buttons { margin: 20px; font: 14px Tahoma; } .radio_buttons div { float: left; } .radio_buttons input { position: absolute; left: -9999px; } .radio_buttons label { display: block; margin: 0 0 0 -1px; padding: 8px 10px; border: 1px solid #BBBBBB; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, .12); cursor: pointer; } .radio_buttons input:checked + label { background: white; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2); } .radio_buttons div:first-child label { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .radio_buttons div:last-child label { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
А теперь все стили применим на html разметку:
Таким простым способом мы добились нужного эффекта.
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Input:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input { display: none; }
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before { border-radius: 3px; }
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
Input:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }
В итоге, вот что у нас должно получиться:
Итоги
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
Мы продолжаем тему прошлого урока и в нем мы рассмотрели процесс создания обычных полей для ввода текста . Сегодня, в продолжение, мы научимся создавать еще один элемент формы это радиокнопки. Такие кнопки используются, когда нужно указать один из вариантов ответа на выбор, например «да» или «нет», и не как не оба варианта. Давайте создадим такие радиокнопки, возьмем конечный результат прошлого урока и после полей input создадим новый абзац и напишем еще один тег и в нем укажем следующие атрибуты.
Первый - это тип поля type= "radio" - атрибут, задающий тип кнопки. Второй - это атрибут задающий имя нашей кнопке name= "time" . Это значение и будет послано нашему обработчику в момент, когда посетитель нажмет кнопку «отправить». То есть если эта радиокнопка будет активна, то именно это значение и будет отправлено обработчику value= "yes" . В итоге у нас получилась вот такая строка. Вставив в редактор эту строку, и обновив браузер, получим простую радиокнопку.
HTML
Конечно сейчас радиокнопка выглядит совсем не понятно, нет ни вопроса и нет варианта ответа, то есть непонятно за что она отвечает. Поэтому создадим сначала вариант ответа с помощью тега
HTML
Теперь наша кнопка уже имеет вариант ответа (ее значение). Теперь создадим еще одну радиокнопку с противоположным ответом «нет». Делается это очень просто, копируем уже созданную кнопку и меняем в ней слово «да» на «нет» и в атрибуте value устанавливаем значение no . Важно знать тот факт, что имена у радиокнопок должны оставаться одинаковыми, так как это показывает браузеру, что эти две кнопке относятся одной группе и что они взаимоисключающие друг для друга.
HTML
Вот мы получили вторую радиокнопку и если мы кликнем на одну из кнопок, то выделяется именно та кнопка которую мы выбираем. То есть они взаимно исключают друг друга и происходит это, потому что у них одинаковые имена. Если вы зададите два разных имени, то тогда появится возможность выделить сразу две кнопки, что становится логически не совсем верным.
Ну и теперь зададим сам вопрос для наших кнопок, перед нашими кнопками создаем еще один абзац с нашим вопросом.
HTML
Ну и теперь еще один интересней момент он может пригодится при использовании радиокнопок это автоматическая активация кнопки. Если сейчас обновить страницу, то у Вас не активна не одна кнопка. Изначально мы можем указать, какая кнопка будет активна, для этого используется специальный атрибут, добавив его к кнопке, она по умолчанию будет активирована. И этот атрибут называется checked , что в переводе с английского означает «отмеченный». Этот атрибут достаточно не обычный, ему не требуется указывать значение.
На этом с радиокнопками все. В суме двух уроков у нас получился вот такой код:
HTML