Гарні checkbox та radio кнопки на CSS3 без JavaScript

Ви коли-небудь цікавилися, як стилізувати checkbox’и і radio кнопки без використання JavaScript? Завдяки CSS3 це легко зробити.

Цим уроком ми відкриваємо серію статей, які стосуються не тільки візуального оформлення, а й того, як всю цю красу реалізувати в коді.

Крок 1: Коротко про метод

Рекомендую прочитати: 30 селекторів CSS, про які варто пам’ятати.

Для тих з вас, хто добре знає CSS і просто хоче дізнатися потрібну інформацію, ось найважливіші рядки коду CSS всього уроку:

input[type="checkbox"]:checked + label { }

Повертаємось до нашої теми. Завдяки невеличкій зміні псевдо-елемента :checked (в CSS3), ми можемо позначити елементи, які вибрані (checked) чи не вибрані. Для позначення сусіднього елемента, який розташований відразу після checkbox-а чи radio кнопки, в нашому випадку це мітка (label) ми використати “+”.

Крок 2: HTML

Тепер, давайте створимо HTML та CSS файли і почнемо працювати. Я думаю ви знаєте, як це зробити, тому я не буду витрачати на це час.

В цьому уроці, я продемонструю цей прийом тільки на checkbox-ах, а варіант з radio кнопками робиться аналогічно, і він є в архіві з вихідним кодом.

Добре, давайте вже нарешті розпочнемо. Почнемо ми зі створення checkbox-ів, які будуть супроводжуватися label-ами.

Чекбокс 1

У випадку, якщо ви мало знайомі з елементом , ви повинні зв’язати checkbox та label для того, щоб можна було впливати на checkbox через label. Використвуйте for=”” та ID checkbox-а, щоб встановити цю взаємодію.

Чекбокс 1

Я також додам всередину label (це більше особисті уподобання), але цей момент ми розглянемо на третьому кроці.

Крок 3: CSS

Саме тут починається найцікавіше. Перше, що ми робимо — це є основою всього уроку — це фактично приховуємо checkbox.

input[type="checkbox"] {
 display:none;
 }

Тепер, ми можемо стилізувати наш label, а якщо конкретніше, то span, про який говорилося раніше. Я роблю це для того, щоб отримати більший контроль над позиціонуванням checkbox’а. Ви б, мабуть, використовували фонове зображення прямо для label, але при позиціонуванні у вас можуть виникнути проблеми.

input[type="checkbox"] {
 display:none;
 }
 input[type="checkbox"] + label span {
 display:inline-block;
 width:19px;
 height:19px;
 background:url(check_radio_sheet.png) left top no-repeat;
 }

Добре, давайте я швидко поясню, що до чого. Перш за все, зверніть увагу на фон. Я маю маленький спрайт для цього. Отже, все, що я маю зробити — це встановити позицію фонового зображення для span. Сам по собі, span має ширину і висоту таку ж, як кожний стан у спрайті. Це дозволяє легко визначити потрібну область.

Ось інша частина CSS, специфічна для мого стилю. Це чисто для естетики на мій особистий смак.

input[type="checkbox"] {
 display:none;
 }
 input[type="checkbox"] + label span {
 display:inline-block;
 width:19px;
 height:19px;
 margin:-1px 4px 0 0;
 vertical-align:middle;
 background:url(check_radio_sheet.png) left top no-repeat;
 cursor:pointer;
 }

Крок 4: Робимо так, щоб все працювало

Залишилось зробити не так багато роботи, тож давайте продовжимо. Останнє, що потрібно зробити — це змінити стан елемента, коли поле вибране, та при наведенні курсора (не обов’язково). Це досить просто, тільки погляньте!

input[type="checkbox"] {
 display:none;
 }
 input[type="checkbox"] + label span {
 display:inline-block;
 width:19px;
 height:19px;
 margin:-1px 4px 0 0;
 vertical-align:middle;
 background:url(check_radio_sheet.png) left top no-repeat;
 cursor:pointer;
 }
 input[type="checkbox"]:checked + label span {
 background:url(check_radio_sheet.png) -19px top no-repeat;
 }

Зверніть увагу на те, що я використовую спрайт, тож все, що мені потрібно робити — це змінювати позицію фонового зображення. Також, для того, щоб стилізувати span-и label-и, коли ви клікаєте на checkbox / radio кнопку було використано :checked — псевдо-селектор в CSS3.

Щодо кросбраузерності

Псевдо-селектори добре підтримуються усіма браузерами, окрім IE звичайно. Ви можете забувати про :checked в IE9 і нижче.

З підтримкою :checked в мобільних браузерах — теж не зрозуміло. Наприклад, Mobile Safari (iOS 6) не підтримує цю можливість.

Висновок

Давайте перевіримо наш код. Перше — HTML:

Чекбокс 1

Ваш код виглядає так само? Не забудьте додати span. Коли будете експериментувати з ним, я рекомендую вам знайти нові шляхи для реалізації цієї частини. Хотілося б подивитися, що придумали ви, задля більш ефективної та правильної реалізації.

Тепер CSS:

input[type="checkbox"] {
 display:none;
 }
 input[type="checkbox"] + label span {
 display:inline-block;
 width:19px;
 height:19px;
 margin:-1px 4px 0 0;
 vertical-align:middle;
 background:url(check_radio_sheet.png) left top no-repeat;
 cursor:pointer;
 }
 input[type="checkbox"]:checked + label span {
 background:url(check_radio_sheet.png) -19px top no-repeat;
 }

Майте на увазі, що багато чого з мого коду є специфічним рішенням, яке я створив для демо-файлу. Створіть свій власний і експериментуйте з поданням.

На кінець, найважливіше, що ви могли винести з цього уроку — це перші рядки CSS, які я написав на самому початку:

input[type="checkbox"]:checked + label { }

За допомогою цього, ви можете створити різні речі. Можливості :checked виходять за рамки checkbox-ів і radio кнопок, які використовуються у формах, але я залишу вам можливість проекспериментувати над цим. Я сподіваюся, що вам сподобався мій коротенький урок і ви скористаєтеся тим, побаченим тут.

• Переглянути демо.

Першоджерело — «Quick Tip: Easy CSS3 Checkboxes and Radio Buttons».