З появою CSS3 у нас з'явилася можливість оформляти практично що завгодно і як завгодно. У нашій сьогоднішній статті, як видно із заголовка, ми поговоримо про те, як оформити зовнішній вигляд чекбокса і радіо-кнопки.
Ці два типи елементів введення являють собою нові елементи форм, які досить-таки складно правильно і красиво оформити (таким чином, щоб вони виглядали однаково на різних платформах) - Windows, OS X і Linux відрізняються в дизайні і способі відображення цих елементів форми.
Якщо ви хочете оформити ці два елементи форм, то це керівництво саме для вас. Отже, давайте приступимо.
Давайте почнемо з створення нового HTML-документа. HTML-структура документа буде наступною.
Отже, ми закінчили з нашої розміткою HTML, і тепер давайте приступимо до створення стилізації цих 'input'-елементів. Спочатку давайте займемося оформленням типу радіо-кнопки. Суть полягає в тому, щоб змінити стандартний дизайн в ОС на те, що показано на скріншоті нижче.
Перш за все, ми змінюємо курсор на покажчик, що дозволить нам оповістити користувача про те, що по цьому елементу можна натискати.
Потім ми приховуємо сам радіо-введення.
Далі ми замінюємо прихований радіо-введення на псевдо-елемент: before.
Вищенаведені стилі застосовуються і до чекбокси. Єдина відмінність полягає в тому, що радіо-введення представлений у вигляді кола. Щоб досягти такого ефекту, ми додаємо border-radius, значення якого становить рівно половину висоти і ширини елемента.
На даному етапі наш проект виглядає наступним чином:
Тепер всередину ми додамо невелику окружність, коли елемент введення виділено. Ми скористаємося CSS3 псевдо-класом: checked разом з HTML-символом табуляції (). Цей знак табулированного списку буде відображено за допомогою параметра content, і тому нам потрібно конвертувати його з HTML в CSS за допомогою Entity Conversion Tool.
Отже, коли елемент радіо-введення (прихований) буде відзначений або обраний, всередині з'явиться менша за розміром коло, як це показано на наведеному нижче скріншоті.
З іншого боку, ви також можете скористатися зображенням, і відобразити його за допомогою параметра background-image в псевдо-елементі: before, який ми додали раніше. Ми не використали його, так як вважаємо за краще не використовувати зображення, якщо є інші варіанти.
Тепер давайте оформимо зовнішній вигляд чекбокса. Перш за все, ми також приховуємо цей елемент.
Так як ми замінили елемент введення на псевдо-елемент: before, тепер ми можемо додати закруглені кути.
Далі нам потрібно додати галочку тим же чином, як ми зробили це у випадку з радіо-вводом. На цей раз ми скористаємося HTML-символом галочки ().
А тепер давайте подивимося на фінальний результат.
Це всього лише одна з технік стилізації елементів введення, і ви, звичайно ж, в праві і силах самостійно допрацьовувати цей метод оформлення. Так як ми використовували CSS3: checked, ця техніка буде працювати тільки в тих браузерах, де є відповідна підтримка. Так що, якщо ви хочете, ви також можете використовувати jQuery-плагін.
Подивитися демо | Завантажити вихідний код