Делаю слайдер с помощью CSS: радиобаттоны + к ним лейблы(чтобы, через них стилизовать). Все работает - слайды переключаются при :checked. Но все лейблы выглядят одинаково. А надо чтобы при :checked так же менялся цвет лейбла. Не могу это реализовать! Прошу помощи! Код:
input[type="radio"] {
display: none;
}
label {
background: #9A6400;
width: 20px;
padding: 0px 10px 0px 10px;
margin-left: 80px;
transition: .5s;
border-radius: 100%;
}
#btn1:checked ~ #slides .articles article:nth-child(2) {
margin-left: 100%;
transition: 0.5s ease;
}
#btn1:checked ~ #slides .articles article:nth-child(3) {
margin-left: 200%;
transition: 0.5s ease;
}
#btn2:checked ~ #slides .articles article:nth-child(3) {
margin-left: 100%;
transition: 0.5s ease;
}
#btn2:checked ~ #slides .articles article:nth-child(1) {
margin-left: -100%;
transition: 0.5s ease;
}
#btn3:checked ~ #slides .articles article:nth-child(1) {
margin-left: -200%;
transition: 0.5s ease;
}
#btn3:checked ~ #slides .articles article:nth-child(2) {
margin-left: -100%;
transition: 0.5s ease;
}
<input type="radio" name="button" id="btn1" checked>
<input type="radio" name="button" id="btn2">
<input type="radio" name="button" id="btn3">
<label for="btn1"></label>
<label for="btn2"></label>
<label for="btn3"></label>