Стилизация input[type="checkbox"] на css

74
Алексей,
Стилизация input[type="checkbox"] на css

Простенькая стилизация инпутов, используется только тег label и псевдоэлементы :beforе и :after

Простенькая стилизация инпутов, используется только тег label и псевдоэлементы :beforе и :after

Демо:

Исходный код:

<label class="checkbox-label" tabindex="0" onkeydown="this.click()">
	<input type="checkbox" name="drink" value="yes">
	Согласны?
</label>
<style>
	.checkbox-label{
		position: relative;
		padding-left: 24px;
		user-select: none;
		outline: none;
		line-height: 18px;
		display: block;
	}
	.checkbox-label > input{
		display: none;
	}
	.checkbox-label:before,
	.checkbox-label:after{
		content: "";
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		position: absolute;
		left: 0;
		top: 0;
		color: #333;
		box-sizing: border-box;
	}
	.checkbox-label:before{
		border: 2px solid #333;
		border-radius: 5px;
	}
	.checkbox-label:has(input:checked):after{
		content: '✔';
		color: red;
	}
	.checkbox-label:focus-visible,
	.checkbox-label:focus-visible:before{
		border-color: #0c7ff2;
		color: #0c7ff2
	}
</style>

Аналогично можно поменять стили и для type="radio"

tabindex="0" onkeydown="this.click()" нужны для навигации до поля и проставления галочки используя только клавиатуру

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 25 января 2024
css, стилизация, input, checkbox, вёрстка
Поделиться
Комментарии
❮…❯
Авторизуйтесь чтобы получать уведомления об ответе
Простенькая стилизация инпутов, используется только тег label и псевдоэлементы :beforе и :after