Стилізація прапорців

9 червня 2022 р.1173

Для зміни стилю прапорців та перемикачів ми взагалі ховаємо вихідний елемент <input> за допомогою значення none у властивості display, а потрібний стиль застосовуємо до елемента <label>, пов'язаного з цим < ;input>. У прикладі 1 прапорець зроблений як кольоровий прямокутник, усередині якого переміщується білий квадратик (рис. 1). Увімкнений прапорець виглядає як прямокутник синього кольору із квадратиком ліворуч; вимкнений прапорець виглядає як прямокутник сірого кольору з квадратиком праворуч.

Вид прапорця

Мал. 1. Вигляд прапорця

Щоб квадратик плавно переміщався з одного положення до іншого, додана властивість transition, значенням якого виступає час руху, в даному випадку півсекунди .

Приклад 1. Стилізація прапорця

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прапорець</title> <style> .switch input { display: none; /* Ховаємо вихідний прапорець */
} 
.switch label { display: inline-block; /* Рядково-блоковий елемент */
position: relative; /* Відносне позиціонування */
width: 60px; height: 30px; /* Розміри прямокутника */
background: #9E9E9E; /* Сірий колір фону */
transition: 0.5s; /* Час зміни кольору фону */
} 
.switch label::before { content: ''; position: absolute; /* Абсолютне позиціонування */
background: #fff; /* Колір фону квадратика */
width: 20px; height: 20px; /* Розміри квадратика */
left: 35px; top: 5px; /* Положення квадратика */
transition: 0.5s; /* Час руху квадратика */
} 
.switch input:checked + label { background: #1976D2; /* Синій колір фону */
} 
.switch input:checked + label::before { left: 5px; /* Квадратик зліва */
}
</style>
</head>
<body> <div class="switch"> <input type="checkbox" id="switch"> <label for="switch"></label>
</div>
</body>
</html>

Сам квадратик виводиться за допомогою псевдоелемента ::before, який додається до селектора label. Це дозволяє легко стилізувати елемент, наприклад, зробити його круглим, додавши лише властивість border-radius.

Див. також

Автор та редактори

Автор: Влад Мержевич

Останнє змінення: 11.03.2020

Редактори: Влад Мержевич