Оформлення чекбоксів і радіо-кнопок за допомогою css3

З появою CSS3 у нас з'явилася можливість оформляти практично що завгодно і як завгодно. У нашій сьогоднішній статті, як видно із заголовка, ми поговоримо про те, як оформити зовнішній вигляд чекбокса і радіо-кнопки.

Ці два типи елементів введення являють собою нові елементи форм, які досить-таки складно правильно і красиво оформити (таким чином, щоб вони виглядали однаково на різних платформах) - Windows, OS X і Linux відрізняються в дизайні і способі відображення цих елементів форми.

Оформлення чекбоксів і радіо-кнопок за допомогою css3


Якщо ви хочете оформити ці два елементи форм, то це керівництво саме для вас. Отже, давайте приступимо.

Давайте почнемо з створення нового HTML-документа. HTML-структура документа буде наступною.

Отже, ми закінчили з нашої розміткою HTML, і тепер давайте приступимо до створення стилізації цих 'input'-елементів. Спочатку давайте займемося оформленням типу радіо-кнопки. Суть полягає в тому, щоб змінити стандартний дизайн в ОС на те, що показано на скріншоті нижче.

Оформлення чекбоксів і радіо-кнопок за допомогою css3

Перш за все, ми змінюємо курсор на покажчик, що дозволить нам оповістити користувача про те, що по цьому елементу можна натискати.


Потім ми приховуємо сам радіо-введення.


Далі ми замінюємо прихований радіо-введення на псевдо-елемент: before.


Вищенаведені стилі застосовуються і до чекбокси. Єдина відмінність полягає в тому, що радіо-введення представлений у вигляді кола. Щоб досягти такого ефекту, ми додаємо border-radius, значення якого становить рівно половину висоти і ширини елемента.


На даному етапі наш проект виглядає наступним чином:


Тепер всередину ми додамо невелику окружність, коли елемент введення виділено. Ми скористаємося CSS3 псевдо-класом: checked разом з HTML-символом табуляції (). Цей знак табулированного списку буде відображено за допомогою параметра content, і тому нам потрібно конвертувати його з HTML в CSS за допомогою Entity Conversion Tool.


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

Оформлення чекбоксів і радіо-кнопок за допомогою css3


З іншого боку, ви також можете скористатися зображенням, і відобразити його за допомогою параметра background-image в псевдо-елементі: before, який ми додали раніше. Ми не використали його, так як вважаємо за краще не використовувати зображення, якщо є інші варіанти.

Тепер давайте оформимо зовнішній вигляд чекбокса. Перш за все, ми також приховуємо цей елемент.


Так як ми замінили елемент введення на псевдо-елемент: before, тепер ми можемо додати закруглені кути.


Далі нам потрібно додати галочку тим же чином, як ми зробили це у випадку з радіо-вводом. На цей раз ми скористаємося HTML-символом галочки ().


А тепер давайте подивимося на фінальний результат.

Це всього лише одна з технік стилізації елементів введення, і ви, звичайно ж, в праві і силах самостійно допрацьовувати цей метод оформлення. Так як ми використовували CSS3: checked, ця техніка буде працювати тільки в тих браузерах, де є відповідна підтримка. Так що, якщо ви хочете, ви також можете використовувати jQuery-плагін.

Подивитися демо | Завантажити вихідний код

Схожі статті