Стилізація перемикачів

9 червня 2022 р.312

Стилізація перемикачів відбувається аналогічно стилізації прапорців — ми приховуємо вихідний елемент <input>, а замість нього стилізуємо елемент, що йде в коді HTML після <input>. При цьому обов'язково використовуємо <label>, без якого поведінка перемикача не працюватиме. Оскільки перемикачі зазвичай вставляються групою, то зв'язувати <input> з <label> через ідентифікатор не дуже зручно через те , що доведеться вводити безліч ідентифікаторів Так що зробимо інакше — вставимо <input> всередину <label>, а після <input> додамо елемент <span>.

<code data-language="html"><label><input type="radio"><span></span></label>

Вигляд самого перемикача ми задаємо через селектор span, а вид вибраного перемикача через селектор :checked+span. У прикладі 1 показано створення круглого перемикача з білою точкою по центру.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перемикачі</title> <style> .radio input { display: none; /* Ховаємо вихідний перемикач */
} 
.radio span {position: relative; /* Відносне позиціонування */
display: inline-block; /* Рядково-блоковий елемент */
width: 20px; height: 20px; /* Розміри */
background: #F5F5F5; /* Сірий колір фону */
border-radius: 50%; /* Круглий перемикач */
box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Тінь всередині */
} 
.radio input:checked + span { background: #F44336; /* Червоний колір фону */
} 
/* Додаємо білу точку по центру */
.radio input:checked + span::before { content: ''; position: absolute; left: 6px; top: 6px; background: #fff; width: 8px; height: 8px; border-radius: 50%; }
</style>
</head>
<body> <p>Вкажіть вашу підлогу:</p> <p><label class="radio"><input type="radio" name="g" checked><span></span> Чоловічий</label> <label class="radio"><input type="radio" name="g"><span></span> Жіночий</label> <label class="radio"><input type="radio" name="g"><span></span> Не скажу</label></p>
</body>
</html>

Результат цього прикладу показаний на рис. 1. Елемент <span> робимо квадратним, а потім перетворюємо на коло через властивість border-radius з значенням 50%. Для краси додаємо внутрішню тінь за допомогою box-shadow та значенням inset. Остаточно з'єднуємо псевдоклас :checked та псевдоелемент ::before для відображення білої точки у вибраного перемикача.

Вигляд перемикача

Мал. 1. Вигляд перемикача

Див. також

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

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

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

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