2

Делаю слайдер с помощью 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>

1 ответ 1

4

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>

2
  • Благодарю! Все работает! 23 янв 2019 в 15:22
  • @АлдиярЕсентаев, если Вас устраивает ответ, то поставьте галочку слева от ответа, это поможет людям в будущем с идентичной проблемой.
    – meine
    23 янв 2019 в 16:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.