@maragon

CSS стилизация checkbox + radio scss, как правильно?

kube framework.
Задача: раскрасить чекбокс или радио при нажатии
Дано:
<label class="is-checkbox"><input type="radio"> Check 1</label>


Пробовал так (добавить span во внутрь):
<label class="is-checkbox"><span></span><input type="radio"> Check 1</label>


label {
&.is-checkbox input { display: none }
&.is-checkbox span { 
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-right: 0px;
		bottom: -2px;
		left: 1px;
		position: relative;
		background: $color-blue;
		border-radius: 4px
	}
&.is-checkbox input:checked + span { background: red } //not-worked
}


Но, отловить клик по input и раскрасить этот же span БЕЗ js у меня не получается.
Может кто силён?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
xdevelx
@xdevelx
Web Developer
Пробовал так (добавить span во внутрь):
<label class="is-checkbox"><span></span><input type="radio"> Check 1</label>

Если хотите использовать селектор input:checked + span, то разметка должна быть:
<label class="is-checkbox"><input type="radio"><span></span> Check 1</label>


https://codepen.io/xdevelx/pen/eYOvzaj
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы