Стилізація checkbox, radio на чистому css

Категорія: Фрілансерам 15.10.2018 2 130

Коли я тільки починав пам'ятаю, яка буде проблема і боль стилізувати ці елементи форми. Тому давайте в цій статті розглянемо варіант верстки елементів html форми checkbox, radio без використання JavaScript.
Я часто верстаю тому постараюся зробити такий варіант щоб можна було просто скопіювати і використати в своєму проекті.
І так поїхали.

До початку написання коду можете переглянути демо вигляд.

Створюємо html елемент checkbox і також label. Обов'язково треба зберегти пріорітет. Спочатку checkbox і під ним label. Причину дізнаєтеся трішки з часом.

<input type="checkbox" id="my-name-checkbox" name="empty" value="">
<label for="my-name-checkbox">Текст поля чекбокс</label>

Також давайте обгорнемо ці два тега в div з класом .input-own-style , в нас вийде наступне:

<div class="input-own-style">
    <input id="my-name-checkbox" type="checkbox" class="input-own-style__input" name="empty" value="">
    <label for="my-name-checkbox" class="input-own-style__label">Текст поля чекбокс</label>
</div> <!-- .input-own-style  -->

Тепер коли в нас є готовий html давайте його стилізувати.
Щоб наш код був гнучкий будемо прив'язуватися до класу .input-own-style.

Перше, що нам потрібно це приховати стандартний input.

Забіжу трішки наперед, що весь стиль поля в нас буде мати саме label, але поки приховаємо саме стандартний input.

Використаємо наступрний код:

.input-own-style input[type=checkbox],
.input-own-style input[type=radio] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    height: 100%;
}

Впевнений, що дехто подумає: "Чому б просто не дати display: none;?", а причина полягає в тому, що тоді не буде працювати псевдоелемент :before і також стандартний вивід помилок.

Приклад я постараюся показати у відео, що запишу до цієї статті.

Далі пропоную оголосити змінні, які ми будемо використовувати в цьому проекті:

:root {
	--input-own-style__before-padding: 22px;
	--input-own-style__top: 2px;
	--input-own-style__width: 16px;
	--input-own-style__height: 16px;
	--input-own-style__bg-default: #dee2e6;
	--input-own-style__bg-checked: #007bff;
	--input-own-style__focus: rgba(0,123,255,.25);
	--input-own-style__checked-img: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

Далі все просто.

В нас є тег label в якому і буде весь стиль.

Цьому тегу даємо наступні стилі:

.input-own-style label {
    position: relative;
    cursor: pointer;
    padding-left: var(--input-own-style__before-padding);
}

Тобто label в нас буде мати ефект мишки "курсор" при наведенні, також, мати відступ з ліва для графічного виводу синього квадрату з іконкою галочки і в цілому оголошуваємо спосіб позиціонування відносно його поточного місця.

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

/* Псевдоелемент before і after має мати спільні сталі, ми їх можемо об'яєднати через кому */
.input-own-style label::after,
.input-own-style label::before {
	content: ''; /* Оголошуємо вивід тексту */
	position: absolute; /* Вибиваємо з загального потоку позиціонуванні */
	left: 0; /* Прикріпляємо до лівого краю */
	top: var(--input-own-style__top); /* За допопою змінної вказуємо скільки треба відступи з верху */
	display: block; /* Об'являємо як блочний елемент */
	border-radius: 4px; /* Заокруглюємо кути квадрату */
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; /* Добавляємо анімацію при зміні елементу */
	width: var(--input-own-style__width); /* Ширина */
	height: var(--input-own-style__height); /* Висота */
}
.input-own-style label::before {
	background-color: var(--input-own-style__bg-default); /* Колір поля за замовчування */
}
/*Будемо використовувати картинку і даємо наступні стилі */
.input-own-style label::after {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50% 50%;
}
 /*При ефекту focus надаємо стилі щоб було видно на якому ми зараз елементі */
.input-own-style__input:focus~.input-own-style__label::before {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--input-own-style__focus);
}
.input-own-style .input-own-style__input:checked~.input-own-style__label::after {
	background-image: var(--input-own-style__checked-img); /* Картинка загочки */
}
.input-own-style .input-own-style__input:checked~.input-own-style__label::before {
	background-color: var(--input-own-style__bg-checked); /* Колір поляр при активному виборі */
}

В даному випадку все, що вам треба зробити це просто скопіювати цей весь код і вставити у ваш проект.

Також представлю Вам відео де розгляну написаний код детальніше.

Якщо вам сподобалася стаття, поставте лайк і буду радий прочитати вашу думку в коментарях про цей матеріал.

Поділися з друзями:

Будь частиною проекту

Напиши мені повідомлення

Можливо є якісь питання чи зауваження?
Що подобається, що ще б хотіли бачити на цьому проекті?

Написати свою думку