Свои стили для radio button. Стилизуем чекбоксы и радиокнопки с CSS3. Особенности работы полей input
Благодаря 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, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
Всем доброго времени суток!Кастомизация элементов форм наверное одно из самых увлекательных занятий в Веб-дизайне. Оправданное ли это занятие решает каждый для себя сам, хотя очевидно, что в наше время дизайнеры и верстальщики все же уделяют этому свои силы и время.
К сожалению, одного только 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 "а.
В результате получаем что-то вроде:
a! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3 !
То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:
HTML разметка
Расположим элементы на странице:
Здесь ничего особенного, каждому элементу задаем id и name , также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label , вставляем span . Для чего именно, написано ниже.
Правила CSS
Сейчас начинается самое интересное. Разберем создание только элемента «флажок», «переключатель» формируется аналогичным путем. Первое что мы делаем, это скрываем стандартный флажок из виду:
input[
type=
"checkbox"
]
{
|
Теперь, становится ясно, для чего нужен элемент span . Вместо скрытого стандартного флажка организуем новый, используя span :
1 | input[
type=
"checkbox"
]
+
label span {
|
С помощью CSS селектора выбираем все span
внутри тега label
, которые принадлежат элементам input
с типом checkbox
(т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):
Для выбранных span задаем высоту и ширину в 19px , и располагаем фоновое изображение.
Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked ). Для этого просто смещаем данное изображение влево на 19px :
input[
type=
"checkbox"
]
:
checked
+
label span {
|
Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio» .
В прошлом уроке мы изучили понятие формы. Её основная задача - объединить формы ввода данных определённого типа. Например, форма может объединить данные анкеты, теста и тд. В этом уроке мы научимся делать сами поля ввода!
За заполнение формы отвечает специальный тег , у него есть атрибут type, который позволяет создать определённые заполняемые поля: текстовые поля, радиокнопки, флажки, списки, кнопки. Повторяю, все перечисленные вверху элементы доступны лишь в одном теге - .
Тег в HTML
- это одиночный тег, с помощью которого можно создавать определённые элементы документа (текстовые поля, радиокнопки, флажки, списки, кнопки), которые предназначены для заполнения прямо на html-странице.Ниже пример работы в HTML
У тега имеется несколько очень важных значений атрибутов.
name - атрибут, который следует всегда задавать для элемента, чтобы обработчик (скрипт) понимал, input с каким именем он обрабатывает.
Так скрипт обработки поймёт, что это два разных поля.
type - данный атрибут отвечает за указание типа поля. Как уже говорилось ранее, при определённом типе input может стать радиокнопкой, флажком, списком, кнопкой, текстовым поля.
size - атрибут, указывающий размер для текстового поля, когда type указан как text. Указанные данные воспринимаются как ширина поля.
Тег
Атрибут type для input
Теперь давайте подробнее разберем атрибут type и его значения:text - значение атрибута указывает на то, что будет отображено обычное текстовое поле, изначально доступное для изменения.
Атрибут value
не обязателен, его можно вообще не указывать. Однако, если нужно указать значение по умолчанию, которое будет изначально отображаться в поле, то его следует заполнить.
password - превращает input в поле для заполнения пароля. Отличие от text заключается в том, что вводимые данные будут отображаться как звёздочки, а после заполнения всей формы браузер будет понимать, что в этом поле пароль и будет спрашивать, нужно ли его сохранить.
submit - подобное значение атрибута type определяет input как кнопку, при нажатии которой будет прорабатываться определённый сценарий (что такое сценарий вы узнаете позже, изучив языки PHP и JavaScript). Кнопка используется для того, чтобы отправить данные из форм к обработчику, написанному, например, на вышеуказанных языках. Есть и другие, но указал самые популярные.
reset - это ещё один вид кнопки, который обнуляет все значения в форме. после её нажатия их нужно будет заполнить заново.
radio
- Данное значение создает радиокнопку, то есть переключатель. Используется, как правило, для значений с небольшим количеством вариантов. Например, выбрать пол, интервал с возрастом и тп. выглядит следующим образом:
У атрибута type задано значение radio - это радиокнопка. В значение value записывается та фраза или слово, которое вы хотите получить, если кто-то выбрал определенную радиокнопку и отправил данные.
Бывают и другие случаи, когда пользователю нужно выбрать несколько вариантов ответа. В этом случае используется уже не радиокнопка (принимает только один вариант), а флажок или чекбокс.
checkbox - это поле, которое работает так же как и радиокнопка. С разницей лишь в том, что можно выделить несколько чекбоксов в качестве вариантов ответа. Также как и с радиокнопкой, если к вопросу принадлежат несколько чекбоксов, то у них атрибут name должен быть соответственно одинаково заполнен. В value соответственно будет указано значение выбранного поля.
Особенности работы полей input
Тут предлагаю разобрать некоторые вопросы, с которыми также можете столкнутmcя в начале в работе с input.Как сделать так, чтобы у пользователя сразу был выбран ответ (чекбокс или радиокнопка)?
Для этого существует одиночный атрибут checked. Его нужно указать в конце тега input. Так как атрибут одиночный, то значений у него никаких нет. Надо лишь добавить его в элемент input. Например, как в записи ниже:
Как сделать так, чтобы напротив чекбокса или радиокнопки был виден текст, поясняющий данный выбор?
Для этого перед и после радиокнопки или чекбокса пишем тег
Соответственно указываете в теге label, открывающем и закрывающем, сам чекбокс и нужные слова. И внимание! Даже если пользователь нажмёт на слово, то чекбокс всё равно будет выделен.
Последнее обновление: 08.04.2016
Флажок
Флажок представляет элемент, который может находиться в двух состояниях: отмеченном и неотмеченном. Флажок создается с помощью элемента input с атрибутом type="checkbox" :
Изучаемые технологии
Атрибут checked позволяет установить флажок в отмеченное состояние.
Переключатели
Переключатели или радиокнопки похожи на флажки, они также могут находиться в отмеченном или неотмеченном состоянии. Только для переключателей можно создать одну группу, в которой одновременно можно выбрать только один переключатель. Например:
Для создания радиокнопки надо указать атрибут type="radio" . И теперь другой атрибут name указывает не на имя элемента, а на имя группы, к которой принадлежит элемент-радиокнопка. В данном случае у нас две группы радиокнопок: gender и tech . Из каждой группы мы можем выбрать только один переключатель. Опять же чтобы отметить радиокнопку, у нее устанавливается атрибут checked:
Важное значение играет атрибут value , который при отправке формы позволяет серверу определить, какой именно переключатель был отмечен.
