Advertisement
  1. Web Design
  2. CSS
Webdesign

Короткий Урок: Создание Чекбоксов и Радиокнопок в CSS3

by
Length:LongLanguages:

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Вы когда нибудь задумывались, как стилизовать чекбоксы и радиокнопки, при этом не используя JavaScript? Благодаря CSS3 вы это можете! Вот что мы собираемся сделать в этом уроке:

Если вы ищите графику для элементов интерфейса, взгляните на UI наборы доступные на Envato Elements. В противном случае, прихватите чашечку кофе и давайте начинать наш урок!

1. Понимание Процесса

Рекомендуемое чтение: 30 CSS Селекторов о Которых Вы Должны Помнить

Для тех кто чувствует себя уверенно в использовании CSS и кому нужен только легкий толчок в правильном направлении, вот самая важная CSS строчка из всего урока:

Теперь для тех, кто чувствует, что им этого мало, и надо побольше информации, не боимся, читаем дальше!

Ок, давайте вернемся к нашей теме. Так что же мы будем делать? Благодаря отличному псевдоселектору CSS3 - :checked, мы можем указать на элемент в зависимости от его статуса отмечен - не отмечен. Потом, мы можем использовать + смежный селектор из CSS2.1, что бы указать на элемент следующий за чекбоксом или радиокнопкой, чем в нашем случае является label.

2. Записываем Наш HTML-код

Теперь мы начнем создавать наши HTML и СSS файлы (хотя может вы предпочитаете другой стиль) и приступаем к работе. Я надеюсь, вы знаете как это делать, так, что мы не будем останавливаться на этом подробно.

Я покажу вам технику только для случая чекбокса, чтобы направить вас на "путь истинный", а, для случая радиокнопки, процесс будет такой же, и кроме того, в исходниках все есть.

Хорошо, давайте уже начнем, мы можем уже? Мы начнем с создания нашего чекбокса, за которым следует тег label.

Теперь, на случай, если вы мало знаете о теге <label>, вы должны связать input и label, для того, что бы вы могли взаимодействовать с чекбоксом через label. Это делается за счет использования, for = "" и  ID для чекбокса.

Я также добавлю <span> в label, что является моим индивидуальным предпочтением, но вам все станет понятнее на 3 шаге.

3. А для Чего все Это: CSS

Вот тут у нас начинается самое интересное. Первое, что мы делаем, что является основой для этого урока, мы скрываем стандартный чекбокс.

Теперь когда мы это сделали, мы можем создать стиль для label, а точнее для span, который находится у нас в label. Я делаю это, что бы у меня было больше контроля над положением чекбокса. Без этого вам бы пришлось обращаться к фоновому изображению в label, и пришлось бы повозиться с его позиционированием.

Ок, теперь давайте, я вам объясню быстренько, что мы тут делаем. В первую очередь, обратите внимание на фоновое изображение. У меня для него есть маленький спрайт (объединенный набор картинок), поэтому все, что я должен сделать - прописать положение для фонового изображения в span. Сам span задает точную ширину и высоту для каждого элемента в спрайте, таким образом, становится легче задавать каждое состояние.

Our sprite sheet
Наш спрайт лист

Далее остальная часть CSS, в соответствии с моим стилем. Это больше для красоты и соответствует моему вкусу или этому дизайну.

4. Запускаем в Работу

Осталось немного работы, давайте закончим с этим. Все что вам осталось, это прописать состояние для элемента input, на случай имзенения состояния на - "отмеченный" (checked), и в частности для hover. Это очень просто, взгляните!

Заметьте, поскольку я использовал спрайт, все что мне нужно сделать, это изменить положение фонового изображения. Так же заметьте, что, все что мне нужно было, что бы изменить отображение содержимого span в label, когда вы "отмечаете" чекбокс/радиокнопку, это исполользовать псевдоселектор CSS3 - :checked.

Небольшое Замечание по Поддержке Браузерами

Псевдоселекторы поддерживаются почти во всех браузерах, но бывают некоторые исключения, при этом резервные отображения - вполне приличные:

Can I use data for pseudo selectors
Can I Use - возможность использования псевдоселекторов.
IE9 on Windows 7
Резервный вариант: IE9 на Windows 7

Вопрос с поддержкой :checked в старых браузерах используемых в мобильных приложениях не совсем ясен. Например, Mobile Safari для iOS6 его не поддерживает.

Заключение

Итак, мы все сделали, верно? Давайте сверимся. Сначала код для HTML:

У вас все так же? Не забудьте добавить <span>! Когда вы будете экспериментировать с этим самостоятельно, я крайне рекомендую найти вам новый или другой способ, сделать эту часть. Я с удовольствием посмотрю на ваши более эффективные варианты. Теперь сверим CSS:

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

В заключение, самое важное, что вы должны вынести из этого урока - это моя первая строка CSS, которую я привел в самом начале:

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

  • Добавить 2x спрайт для Ретина экранов
  • Использовать SVG вместо растра

Я надеюсь вам понравилась эта короткая статья, и еще я надеюсь, что вы разовьете или улучшите, то, что вы здесь узнали!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.