I make a slider using CSS: radiobuttons + labels for them (in order to stylize them). Everything works - the slides switch when: checked. But all labels look the same. And it is necessary that when: checked the label color also changed. I can not implement it! Please help! Code:

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>

    1 answer 1

     input[type="radio"] { display: none; } #btn1:checked ~ label[for="btn1"] { background-color: red; } #btn2:checked ~ label[for="btn2"] { background-color: red; } #btn3:checked ~ label[for="btn3"] { background-color: red; } 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>

    • Thank you Everything is working! - Aldiyar Esentaev
    • @AldiyarEsentaev, if you are satisfied with the answer, then tick the box to the left of the answer, this will help people in the future with an identical problem. - meine