7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

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

Read Time: 5 mins

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 sheetOur sprite sheetOur sprite sheet
Наш спрайт лист

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.