@Alianos

Как из под input воздействовать на label?

Здраствуйте, скажыте пожалуйста, как сделать так чтоб при нажатии на чекбокс най лейбле появился андерскор
Мой код не работает
<!DOCTYPE html>
<body>
	<label class="btn"><input type="checkbox" class="cht" />Sign up</label>
</body>
<style>
	.btn {
		transition: all 0.25s ease;
	}
	.btn :checked {
		color:red;
		border-bottom: solid 2px #1059ff;
		padding-bottom: 10px;
	}
</style>

</html>

Хотелось бы получить чтото типа 605c84d051cda335215346.png
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
Wacdis
@Wacdis
Web Development fan
<label class="btn"><input type="checkbox" class="cht" /><span></span>Sign up</label>


.btn {
    overflow:hidden;
    position:relative;
}
.btn input {
    visibility: hidden;
    position:absolute;
    left:-100%;
}
.btn span {
    display:inline-block;
    position: relative;
    width:32px;
    height:32px;
    border: 1px solid red;
    margin-right:8px;
}
.btn span:before {
    content:"";
    transition: all 0.25s ease;
    opacity:0;
    position: absolute;
    background-color: red;
    width:16px;
    height:16px;
    left: 8px;
    top:8px;
}
.btn input:checked + span:before {opacity:1;}


p.s... пишу без проверки с телефона :)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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