Почему добавление класса работатет а проверка на checked нет
Здраствуйте, етот код создает красивый ефект выплывания underscore для кнопки
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<label class="signup-inactive"><input type="radio" class="btn" />Sign up</label>
<script>$(function () {
$(".btn").click(function () {
$(".signup-inactive").toggleClass("signup-active");
});
});</script>
</body>
<style>
.btn {
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
color:red;
}
.signup-active {
border-bottom: solid 2px #1059ff;
padding-bottom: 10px;
transition: all 0.25s ease;
}
.signup-inactive {
text-decoration: none;
transition: all 0.25s ease;
}
</style>
</html>
Но можно ли сделать просто input type="radio" и проверять на checked без js? К примеру етот код не работает
<!DOCTYPE html>
<body>
<label class="signup-inactive"><input type="radio" class="btn" />Sign up</label>
</body>
<style>
.btn {
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
color: red;
}
.btn:checked {
border-bottom: solid 2px #1059ff;
padding-bottom: 10px;
transition: all 0.25s ease;
}
</style>
</html>
Как ето можно исправить |
получилось так
<!DOCTYPE html>
<body>
<label class="checkbox-label"><input type="checkbox"><span>Hello world</span></label>
</body>
<style>
input {
display: none;
}
input+span {
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
color: red;
}
input:checked+span {
border-bottom: solid 2px #1059ff;
padding-bottom: 10px;
transition: all 0.25s ease;
}
</style>
</html>
|
| Часовой пояс GMT +3, время: 09:50. |