Перемикач стилів на чистому CSS за допомогою checked
Застосування :checked
Якщо коротко, то :checked застосовується до будь-якої радіокнопки чи чекбоксу та позначає стан вибраного елемента. Користувач може змінити стан елементів, поставивши галочку на інший чекбокс або вибравши іншу радіокнопку.
Перед тим, як піти далі, давайте подивимося на демо, щоб зрозуміти, що ми створюватимемо в цьому уроці:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
А тепер можна продовжувати.
Створення блоку налаштувань
У демо ви мали помітити іконку шестерні і те, як при натисканні на неї з'являється блок з параметрами. Перед поясненням того, який HTML та CSS код лежить за цим, поглянемо на наступний код:
Оскільки нам необхідно відображати лише лейбли, то код вище якраз і ховає чекбокси та радіокнопки. Більш того, всім лейблам присвоєно клас settings-box-element із властивістю z-index , нам потрібно, щоб ці поля завжди залишалися поверх сторінки.
Тепер ми можемо розібратися у коді блоку налаштувань. Почнемо з кнопки-шестерні. Її код:
HTML
CSS
У CSS лейбл спозиційований фіксовано position: fixed з відповідними значеннями top та right. Далі йде білий бокс, що нібито містить кнопки:
HTML
CSS
Наш бокс це порожній DIV із класами «buttons-wrapper» та «settings-box-element». Як я вже говорив вище, останній клас переважно використовується для додавання z-index. "buttons-wrapper" потрібен щоб стилізувати сам DIV. І, як ви можете помітити, боксу задана ширина 200px і висота 240px. Це щоб поміститися 5 кнопок, можете подивитися демо.Також встановлено позиціонування fixed і відповідні значення right top. Єдине, що варто відзначити, що значення властивості right має збігатися із шириною блоку, але з негативним значенням (щоб блок зник з поля зору).
Перший чекбокс вже відзначений атрибутом "checked". Ми використовуємо його за промовчанням. Кожен інпут має свій id, а кожен лейбл свій for, і вони збігаються між собою. І ви можете знати, а може і ні, але весь секрет з атрибутом for у тому, що, якщо ми його використовуємо, то при натисканні на лейбл з атрибутом for автоматично вибирається чекбокс або радіокнопка. Ось чому ми можемо використовувати псевдоклас :checked.
Всім лейблам надано клас «layout-buttons». Він використовується для додавання базових та загальних стилів, як ширина, padding, border і т.д. Інші класи застосовуються для індивідуальної стилізації. Як ви могли помітити, для іконки шестерні і білого боксу використовується фіксоване позиціонування з певними значеннями top і right. А значення top для кожного лейбла більше на 45px ніж у попереднього; це потрібно, щоб кнопки стали в стовпець, не налягаючи одна на одну. Також зверніть увагу на те, що значення right дорівнює ширині кнопок лише з негативним значенням.
Залишилася остання частина CSS коду:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3