Мы продолжаем тему прошлого урока и в нем мы рассмотрели процесс создания обычных полей для ввода текста
. Сегодня, в продолжение, мы научимся создавать еще один элемент формы это радиокнопки. Такие кнопки используются, когда нужно указать один из вариантов ответа на выбор, например «да» или «нет», и не как не оба варианта. Давайте создадим такие радиокнопки, возьмем конечный результат прошлого урока и после полей input
создадим новый абзац и напишем еще один тег и в нем укажем следующие атрибуты.
Первый - это тип поля type=
"radio"
- атрибут, задающий тип кнопки. Второй - это атрибут задающий имя нашей кнопке name=
"time"
. Это значение и будет послано нашему обработчику в момент, когда посетитель нажмет кнопку «отправить». То есть если эта радиокнопка будет активна, то именно это значение и будет отправлено обработчику value=
"yes"
. В итоге у нас получилась вот такая строка. Вставив в редактор эту строку, и обновив браузер, получим простую радиокнопку.
HTML
Конечно сейчас радиокнопка выглядит совсем не понятно, нет ни вопроса и нет варианта ответа, то есть непонятно за что она отвечает. Поэтому создадим сначала вариант ответа с помощью тега
HTML
Теперь наша кнопка уже имеет вариант ответа (ее значение). Теперь создадим еще одну радиокнопку с противоположным ответом «нет». Делается это очень просто, копируем уже созданную кнопку и меняем в ней слово «да» на «нет» и в атрибуте value
устанавливаем значение no
.
Важно знать тот факт, что имена у радиокнопок должны оставаться одинаковыми, так как это показывает браузеру, что эти две кнопке относятся одной группе и что они взаимоисключающие друг для друга.
HTML
Вот мы получили вторую радиокнопку и если мы кликнем на одну из кнопок, то выделяется именно та кнопка которую мы выбираем. То есть они взаимно исключают друг друга и происходит это, потому что у них одинаковые имена. Если вы зададите два разных имени, то тогда появится возможность выделить сразу две кнопки, что становится логически не совсем верным.
Ну и теперь зададим сам вопрос для наших кнопок, перед нашими кнопками создаем еще один абзац с нашим вопросом.
HTML
Ну и теперь еще один интересней момент он может пригодится при использовании радиокнопок это автоматическая активация кнопки. Если сейчас обновить страницу, то у Вас не активна не одна кнопка. Изначально мы можем указать, какая кнопка будет активна, для этого используется специальный атрибут, добавив его к кнопке, она по умолчанию будет активирована. И этот атрибут называется checked
, что в переводе с английского означает «отмеченный». Этот атрибут достаточно не обычный, ему не требуется указывать значение.
На этом с радиокнопками все. В суме двух уроков у нас получился вот такой код:
HTML
Радиокнопки
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input {
display: none;
}
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before {
border-radius: 3px;
}
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
В этой статье, по сути будут то же самое. но для радио кнопок. В итоге, после того как вы воспользуетесь материалом из этой статьи, то вы получите результат схожий с примером ниже.
Как и в случаи с чекбоксами, весь фокус делается с помощью тех же псевдоселекторов:checked и:not. Аналогично обычная радио кнопка скрывается, а новая на ее месте отображается, которая и имеет более презентабельный вид.
Обычно, radio кнопки идут по несколько штук сразу. С помощью них вы делаете выбор внутри формы перед отправкой. В примерах я тоже буду размещать по две кнопки. Если вам нужно больше или меньше, то без проблем добавляйте или удаляйте соблюдая некоторые правила о которых я напишу ниже.
К примеру, у нас будет две обычные кнопки, которые будут иметь вот такой код.
К каждой кнопке мы с вами добавили метку с помощью label
. Если в старых можно обойтись без них, то в новых они понадобятся в любом случаи. Без них нельзя. В отличии от обычных radio кнопок, у новых так же должен быть указан класс. В итоге получится так:
Как видите, добавлен класс myradio
. Именно этому классу и будут присвоены новые стили CSS. Так же не забудьте про другие стандартные параметры радиокнопок, которые нужно добавлять всем кнопкам.
id
- кнопкам добавляются айди, для того, чтобы было можно подвязать к ним метки label.
name
- имя кнопки. Его можно указывать одинаковым для нескольких радио кнопок, тогда будет возможность переключения между кнопками в форме. Если имена будут разными, то после активации такой кнопки, снять выделение с нее не получится.
for у метки label
- должен соответствовать id нужной кнопки. Важным является момент, что label должен располагаться сразу после радио кнопки.
Закончив с HTML разметкой кнопок, вы можете приступить к их внешним изменениям. Как и писал ранее, все стили мы добавим нашему классу - myradio
. Для этого в свой файл стилей, вы должны добавить вот такой кусок кода.
Если вы давно работаете с CSS, то на этом все и больше никаких шагов не будет. Можете смотреть результат и править стили под себя. Если же вам код не понятен, но вы хотите как то его разобрать, то попробую объяснить, что за что отвечает. Каждый параметр не буду расписывать, для этого существуют учебники по CSS, лишь объясню основы.
Немного ровняем кнопку для старых версий Internet Explorer.
Делаем наш label кликабельным. При наведении на него будет появляться рука вместо стрелки.
Myradio + label {
cursor: pointer;
}
С этого места начинается модернизация кнопок. Первым делом, делаем нашу стандартную кнопку невидимой.
Прозрачность кружка/точки при активации. Как видно в предыдущем пункте был параметр - opacity: 0;
Myradio:checked + label:after {
opacity: 1;
}
Этот параметр я выделил как опциональный. Его эффект - тень вокруг кнопки при фокусировке во время нажатия на нее. В примере это самые нижние кнопки. Если вам не нравится, можете его не добавлять.
Как и в прошлой статье, думаю, вы поняли смысл и заметили, что особо сложного, здесь ничего нет. Весь код можно менять в соответствии со своими идеями, но не допуская ошибок и придерживаясь советов.
На этом все, спасибо за внимание. 🙂
a! Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажу как можно легко и просто заменить стандартные элементы checkbox
(флажки) и radio button
(переключатели) на свои. Использовать будем средства только CSS3
!
То что получилось посмотрите и опробуйте на демо-странице или скачайте исходники:
HTML разметка
Расположим элементы на странице:
Здесь ничего особенного, каждому элементу задаем id
и name
, также используем label
для описания элементов «переключателя» и «флажка». Внутрь тега label
, вставляем span
. Для чего именно, написано ниже.
Правила CSS
Сейчас начинается самое интересное. Разберем создание только элемента «флажок», «переключатель» формируется аналогичным путем. Первое что мы делаем, это скрываем стандартный флажок из виду:
input[
type=
"checkbox"
]
{
display
:
none
;
}
Теперь, становится ясно, для чего нужен элемент span
. Вместо скрытого стандартного флажка организуем новый, используя span
:
С помощью CSS селектора выбираем все span
внутри тега label
, которые принадлежат элементам input
с типом checkbox
(т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):
Для выбранных span
задаем высоту и ширину в 19px
, и располагаем фоновое изображение.
Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked
). Для этого просто смещаем данное изображение влево на 19px
:
Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px
и немного изменятся css селектор, вместо type=»checkbox»
используется type=»radio»
.
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина ), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.
Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже
) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.
Кроме того, сохраняется возможность HTML5-валидации
стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.
Важные особенности
Чтобы всё получилось, важно учитывать следующее:
Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег
Тег должен находиться до тега
«Фокус» заключается в использовании псевдоселекторов:checked и:not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов:before и:after для тега или вышеупомянутого тега-обертки.
Стилизация для современных браузеров
Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.
Теги чекбокса и радиокнопки находятся перед тегом
В HTML-коде
это выглядит следующим образом:
Я переключаю чекбоксА я переключаю радиокнопку
Еще раз хочу заострить ваше внимание — тег обязательно
должен быть расположен перед
тегом . Если вы поменяете их местами, ничего работать не будет.
С помощью свойств position , z-index и opacity для классов.checkbox и.radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.
Теги чекбокса и радиокнопки находятся внутри тега
HTML-код
в данном случае будет следующим:
Я переключаю чекбокс
А я переключаю радиокнопку
По аналогии с предыдущим вариантом — тег обязательно
должен быть расположен перед
тегами с классом.checkbox__text и.radio__text .