1. важливі особливості
2. Стилізація для сучасних браузерів
3. Теги чекбокса і радиокнопки знаходяться перед тегом <label>
4. Теги чекбокса і радиокнопки знаходяться всередині тега <label>
5. Стилізація з урахуванням старих браузерів
6. приклади

Для того, щоб оформити чекбокси і радиокнопки, як того вимагає дизайн, сьогодні не обов'язково використовувати JavaScript-рішення (типу мого плагіна jQuery Form Styler ), Тому що для цього можна задіяти тільки CSS, причому з зворотною сумісністю для старих браузерів (тобто не на шкоду юзабіліті), які не підтримують сучасні CSS-правила.

Іншими словами - в сучасних браузерах чекбокси і радиокнопки будуть виглядати красиво, відповідно до задуманого дизайном, а в старих (це відноситься до Internet Explorer версії 8 і нижче) вони залишаться з оформленням «за замовчуванням», характерним для кожної конкретної операційної системи.

Крім того, зберігається можливість HTML5-валідації стілізуемий елементів (чого може не бути при використанні JavaScript-плагінів). В сучасних браузерах її підтримка - вже давно норма.

важливі особливості

Щоб все вийшло, важливо враховувати наступне:

1. Крім, власне, самого тега елемента, який ми хочемо красиво оформити (<input type = "checkbox"> або <input type = "radio">), знадобиться тег <label>, завдяки якому перемикати елемент можна, клацаючи на текст, а не тільки на сам елемент.
2. Тег <input> повинен знаходитися до тега <label> (в цьому випадку стан елемента форми перемикається за допомогою атрибута for), або він повинен знаходитися всередині тега <label> (в цьому випадку атрибут for не потрібен, але знадобиться тег-обгортка для тексту ).

«Фокус» полягає в використанні псевдоселекторов: checked і: not. При цьому сам чекбокс або радіокнопка робляться невидимими, а їх емуляція здійснюється за допомогою псевдоелементів: before та: after для тега <label> або вищезгаданого тега-обгортки.

до змісту ↑

Стилізація для сучасних браузерів

Розглянемо обидва варіант розташування стілізуемий елемента форми. Який з них найбільш зручний - вирішувати вам. Суть від цього не змінюється.

Теги чекбокса і радиокнопки знаходяться перед тегом <label>

У HTML-коді це виглядає наступним чином:

<Input type = "checkbox" class = "checkbox" id = "checkbox" /> <label for = "checkbox"> Я перемикаю чекбокс </ label> <input type = "radio" class = "radio" id = "radio "/> <label for =" radio "> А я перемикаю радіокнопку </ label>

Ще раз хочу загострити вашу увагу - тег <input> обов'язково повинен бути розташований перед тегом <label>. Якщо ви поміняєте їх місцями, нічого працювати не буде.

CSS-код для чекбокса буде таким:

.checkbox {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .Checkbox + label {position: relative; padding: 0 0 0 60px; cursor: pointer; } .Checkbox + label: before {content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: # CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0, .2); transition: .2s; } .Checkbox + label: after {content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s; } .Checkbox: checked + label: before {background: # 9FD468; } .Checkbox: checked + label: after {left: 26px; } .Checkbox: focus + label: before {box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7); }

CSS-код для радиокнопки буде таким:

.radio {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .Radio + label {position: relative; padding: 0 0 0 35px; cursor: pointer; } .Radio + label: before {content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF; } .Radio + label: after {content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0, .5); opacity: 0; transition: .2s; } .Radio: checked + label: after {opacity: 1; } .Radio: focus + label: before {box-shadow: 0 0 0 3px rgba (255,255,0, .7); }

За допомогою властивостей position, z-index і opacity для класів .checkbox і .radio ми візуально ховаємо оригінальні елементи, при цьому вони залишаються на тому ж самому місці, де будуть стилізовані елементи. А за допомогою margin трохи зміщуємо їх, щоб повідомлення валідації HTML5 виглядало гармонійно. Залежно від дизайну чекбокса і радиокнопки цей відступ можна підігнати.

до змісту ↑

Теги чекбокса і радиокнопки знаходяться всередині тега <label>

HTML-код в даному випадку буде наступним:

<Label class = "checkbox"> <input type = "checkbox" /> <div class = "checkbox__text"> Я перемикаю чекбокс </ div> </ label> <label class = "radio"> <input type = "radio "/> <div class =" radio__text "> А я перемикаю радіокнопку </ div> </ label>

За аналогією з попереднім варіантом - тег <input> обов'язково повинен бути розташований перед тегами з класом .checkbox__text і .radio__text.

CSS-код для чекбокса буде таким:

.checkbox input {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .Checkbox__text {position: relative; padding: 0 0 0 60px; cursor: pointer; } .Checkbox__text: before {content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: # CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0, .2); transition: .2s; } .Checkbox__text: after {content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s; } .Checkbox input: checked + .checkbox__text: before {background: # 9FD468; } .Checkbox input: checked + .checkbox__text: after {left: 26px; } .Checkbox input: focus + .checkbox__text: before {box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7); }

CSS-код для радиокнопки буде таким:

.radio input {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .Radio__text {position: relative; padding: 0 0 0 35px; cursor: pointer; } .Radio__text: before {content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF; } .Radio__text: after {content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0, .5); opacity: 0; transition: .2s; } .Radio input: checked + .radio__text: after {opacity: 1; } .Radio input: focus + .radio__text: before {box-shadow: 0 0 0 3px rgba (255,255,0, .7); }

Стилі тут ті ж самі, що і в попередньому способі, тільки вони застосовуються для інших селекторів.

до змісту ↑

Стилізація з урахуванням старих браузерів

CSS-код для чекбокса. У коментарях до коду я додав пояснення щодо браузерів:

/ * Cначала позначаємо стилі для IE8 і більш старих версій тобто тут ми трохи облагороджуємо стандартний чекбокс. * / .Checkbox {vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } / * Це для всіх браузерів, крім зовсім старих, які не підтримують селектори з плюсом. Показуємо, що label клікабелен. * / .Checkbox + label {cursor: pointer; } / * Далі йде оформлення чекбокса в сучасних браузерах, а також IE9 і вище. Завдяки тому, що старі браузери не підтримують селектори: not і: checked, в них все нижченаведені стилі не спрацюють. В даному випадку checked вказується без двокрапки попереду, чомусь це спрацьовує саме так. * / .Checkbox: not (checked) {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .Checkbox: not (checked) + label {position: relative; padding: 0 0 0 60px; } .Checkbox: not (checked) + label: before {content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: # CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0, .2); transition: .2s; } .Checkbox: not (checked) + label: after {content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); transition: .2s; } .Checkbox: checked + label: before {background: # 9FD468; } .Checkbox: checked + label: after {left: 26px; } .Checkbox: focus + label: before {box-shadow: inset 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7); }

CSS-код для радиокнопки:

.radio {vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .Radio + label {cursor: pointer; } .Radio: not (checked) {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .Radio: not (checked) + label {position: relative; padding: 0 0 0 35px; } .Radio: not (checked) + label: before {content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid # CDD1DA; border-radius: 50%; background: #FFF; } .Radio: not (checked) + label: after {content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: # 9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0, .5); opacity: 0; transition: .2s; } .Radio: checked + label: after {opacity: 1; } .Radio: focus + label: before {box-shadow: 0 0 0 3px rgba (255,255,0, .7); }

до змісту ↑

приклади

Ось таким нескладним чином це і робиться. Завдяки даному способу, оформити чекбокси і радиокнопки за допомогою CSS можна так, як вам буде завгодно.