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

Простенькая стилизация инпутов, используется только тег 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()" нужны для навигации до поля и проставления галочки используя только клавиатуру

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