Доброго вам дня. 🙂
Такий стильний чекбокс робиться за допомогою псевдоселекторов: checked і: not. За своєю суттю ми будимо емулювати роботу чекбокса, а сам чекбокс стане невидимим.
В першу чергу вам потрібно визначиться з чекбоксів, який ви будете модифікувати. Якщо це будуть все чекбокси на сайті, то просто стилі потрібно додавати класу чекбоксів, що і буде показано в прикладі. У загальним, у вас буде чекбокс і він повинен буде мати кілька обов'язкових параметрів. Наприклад у Вас ось такий код:
Вам потрібно його доопрацювати і зробити таким:
Розберемо по порядку обов'язкові параметри:
- class = check - додаємо клас, щоб все чекбокси у яких буде цей клас мали змінений вид.
- id = newchec - додаємо айди, для того, щоб підв'язати до чекбокси label. Так само, якщо вам потрібно виділити лише один чекбокс, то можете не додавати клас, а прописувати стилі для цього самого айди. Природно, і клас і айди може мати будь-яку назву.
- label - другий рядок, яка відповідає за виведення мітки до нашого чекбокси. Її наявність обов'язкова. Навіть якщо вам не потрібна мітка, то всерівно потрібно додати label, навіть порожній.
- for = newchec - ідентифікатор елемента, з яким слід встановити зв'язок. У нашому випадки це наш чекбокс. Як розумієте Значення for повинно відповідати id нашого чекбокса.
Якщо ви правильно оформили майбутній модифікований чекбокс, то можна приступати до найголовнішого - додавання CSS стилів чекбокси. У нашому випадки ми будемо додавати стилі для класу check. який ми присвоїли нашому чекбокси.
Відкриваєте файл стилів і додаєте туди такий шматок коду:
Для тих хто розбирається в CSS, стає все зрозуміло після його огляду. Чогось складного тут немає. Для тих, хто ще не зовсім легко в цьому розбирається, трохи розпишу. Вчити CSS я тут не буду, мені ліньки розписувати кожен параметр, для цього є книжки по CSS.
Насамперед - задаємо стилі для старих версій браузера IE. Тут просто трохи дорівнює стандартний чекбокс.
Робимо наш label клікабельним. При наведенні на нього буде з'являтися рука замість стрілки.
Далі вже починаємо модернізувати наш чекбокс. Робимо наш звичайний чекбокс невидимим.
Робимо позиціонування новому чекбокси щодо нашого label
Установ для вимкненого чекбокса, коли повзунок ліворуч і фон сірий.
Це зовнішній вигляд нашого круглого повзунка.
Колір заднього фону коли повзунок праворуч, тобто чекбокс активований.
Налаштування відстані на скільки буде зміщуватися повзунок при активації чекбокса.
Цей параметр я застосував в третьому чекбоксі. Він задає тінь при фокусуванні на чекбоксі. Можете його не додавати, тоді буде як на другому.
Природно, ви можете все міняти на свій лад. Методом проб і помилок слід регулювати все як потрібно саме вам. Погодьтеся, такий чекбокс набагато симпатичніше стандартного. Якщо сподобався даний метод, сподіваюся ви використовуєте його в майбутньому на своєму сайті. У наступній статті покажу як схожим методом модифікувати круглу радіокнопку.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце