Як реалізувати в css оформлення checkbox-ів

Вітаю вас на своєму блозі, шановні Новомосковсктелі, які цікавляться сайтобудування. Сьогодні я покажу вам класний прийом, який дозволить створювати класні чекбокси, набагато красивіші, ніж ті, що пропонує html за замовчуванням. Я покажу, як робиться в css оформлення checkbox-ів. Іншими словами, я покажу вам, як зробити на css красиві чекбокси (checkbox), тобто галочки.

Початкова розмітка

Отже, почати потрібно з того, щоб додати в html код, який виведе наші чекбокси, а також підписи до них (label), ці поля потрібно зв'язати між собою, щоб при кліці на label можна було встановлювати галочку в поле.

Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:
  1. Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
  2. HostIQ - хостинг преміум якості.
  3. Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
  4. Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!

Прибираємо input, оформляємо спання

Отже, тепер нам треба приховати зі сторінки звичайні чекбокси.

Тепер потрібно якось оформити нові поля. Оформляти ми будемо елементи span, так як вони знаходяться всередині label.

input [type = "checkbox"] + label span display: inline-block;
width: 40px;
margin-right: 10px;
height: 40px;
vertical-align: middle;
border: 5px solid green;
cursor: pointer;
border-radius: 5px;
>

Цим селектором ми вибрали все спання в лейблах, які знаходяться в коді відразу за input ами з типом checkbox. Таким чином, оформлення застосується до наших спання. Ми даємо їм блочно-рядковий тип, певну ширину і висоту, відступ справа, щоб текст не прилягав впритул.

Для оформлення я додав товсту зелену рамку і закруглення кутів в 5 пікселів. Також додамо стиль для курсора - при наведенні на спання він повинен змінюватися зі звичайного вигляду на який вказує перст.

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

Тепер потрібно зробити так, щоб при кліці всередині СПАНА, тобто при виборі якогось варіанту, в нього автоматом ставилася галочка. Для цього я для початку знайшов в інтернеті відповідну іконку з галочкою (вона повинна бути в форматі png), зменшив її до розмірів нашого поля. Тепер залишається вставити такий код:

input [type = "checkbox"]: checked + label span background: url (btn.png) no-repeat;
>

Все, тепер працює! Спробуйте поклацати і ви побачите, що при виборі з'являється красива галочка. Моя картинка лежала в тій же папці, що і файл css і називалася btn.png. звідси і такий запис.