Красивые чекбоксы css. Стилизуем чекбоксы и радиокнопки с CSS3
Влад Мержевич
Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.
Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса - когда он включен и выключен (рис. 1).
Рис. 1. Вверху чекбокс выключен, внизу он включен
Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
HTML
После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.
Первый это тег
После
следует пустой , этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.
CSS
Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label
.
Label {
width: 32px; /* Ширина рисунка */
height: 26px; /* Высота рисунка */
display: block; /* Блочный элемент */
position: relative; /* Относительное позиционирование */
}
Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» . Важно сделать чтобы элемент занимал всю доступную область внутри
Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.
На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked
, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked
применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span
. Поэтому используем соседние селекторы и добавляем стиль к span
идущему после чекбокса с галочкой.
Надеюсь, теперь стало понятно такое положение в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked
.
Собираем код воедино (пример 1) и тестируем его в браузерах.
Пример 1.
Картинка вместо чекбокса
HTML5
CSS3
IE
Cr
Op
Sa
Fx
Переключатель
Браузеры
Все современные версии браузеров - Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.
Также код не будет работать в IE8, эта версия не понимает :checked
. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.
Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label
по умолчанию и скрыть span
(пример 2).
Пример 2. Стиль для IE8
Данный код надо вставить сразу после закрывающего тега
в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input {
display: none;
}
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before {
border-radius: 3px;
}
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
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 .
Вот таким несложным образом это и делается. Благодаря данному способу, оформить чекбоксы и радиокнопки с помощью CSS можно так, как вам будет угодно.
Благодаря CSS3, мы можем добиться практически любого нужного нам на экране эффекта. В этом уроке рассмотрим, каким образом можем стилизовать чекбоксы и радио кнопки.
Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.
Стилизуем чекбоксы
Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:
Input {
display: none;
}
Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:
Checkbox label:before {
border-radius: 3px;
}
Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.
В этом уроке мы рассмотрели способ, который вы можете использовать для нужного вам отображения радио кнопок и чекбоксов. Поскольку мы использовали CSS3, то данная техника будет работать только в браузерах, которые поддерживают эту технологию. Для того чтобы добиться подобных результатов в более старых браузерах, можете воспользоваться соответствующим
Всем привет! Сегодня мы перейдем с вами к видеомонтажу. И первым делом мне хотелось бы дать вам подробную инструкцию, как пользоваться сони вегас про 13, даже если вы начинающий пользователь. На сегодняшний день эта программа является одной из лучших. Ко
Для организации и взаимодействия с приложениями на Android используются лаунчеры. Которые обычно состоят из серии домашних экранов, где мы можем организовать ярлыки приложений, виджеты и так далее. Каждый телефон поставляется с лаунчером, но не все лаунче
Откройте окно с задачей "Мой компьютер
". Если значки в окне мелкие, то измените их на крупные. Конечно, с помощью Правила Внешнего вида!Окно задачи будет выглядеть приблизительно так, как на рисунке:В данном примере значки (C:), (D:) и (E:) обозначают ло