Створення круглих, плоских, а також перемикачів, що перевертаються на CSS

Часто нам необхідно, щоб користувач поставив/зняв прапорець, що означало б відповідь так/ні на якесь запитання чи твердження. Ми вставляємо лейбл, поле введення прапорця і вибираємо значення значення після відправки форми, щоб побачити чи поставив користувач прапорець. Всі ми знаємо, як виглядають стилі прапорців за замовчуванням і немає рішень для стилізації прапорців на чистому CSS. Цей елемент, чиї стилі окремо управляються браузером. Хіба не було б добре мати лощений інтерфейс, такий, як ми іноді бачимо в мобільних додатках?

Зачекайте! Небагато прийомів CSS і рішення для нас готове: додаючи псевдокласи :checked,:before, і :after до наших прапорців, ми можемо досягти гарних перемикачів з плавними ефектами переходів. Ніякої чорної магії… тільки краса чистого CSS. Давайте приступимо.

Практичний курс з верстки адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Закладаємо основу

У HTML немає нічого нового. Стандартний прапорець із відповідним лейблом. Кожна з цих комбаніцій лейбл/поле введення загорнута окремий div. Я поставив йому клас switch. Я збираюся продемонструвати 3 різні стилі:

Круглий перемикач (схожий на те, що використовується в iOS)

Круглий перемикач із плоским оформленням

Кожен стиль буде створено за допомогою класу, який задано кожному елементу Input. Лейбли стилізуватимуться за допомогою селектора input + label, таким чином їм не потрібен окремий клас. А тепер подивимося на HTML:

---