Измените цвет фона при проверке ввода

Я не могу изменить фон своего div, когда проверяется ввод. Когда я проверяю второй ввод, фон div должен измениться, возможно, с анимацией слева направо. Кто-нибудь может мне помочь? Это HTML:

.first_switcher {
  display: block;
  margin: 0 auto;
  height: 38px;
  margin-top: 50px;
  padding: 0px;
  background: dimgray;
  width: 200px;
  border-radius: 38px;
  position: relative;
}
.first_switcher__input2 {
  display: none;
}
.first_switcher__input1 {
  display: none;
}
.first_switcher__label1 {
  float: left;
  width: 100px;
  font-size: 12px;
  line-height: 38px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.first_switcher__label2 {
  float: left;
  width: 100px;
  font-size: 12px;
  line-height: 38px;
  color: dimgray;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.first_switcher__input1:checked+.first_switcher__label1 {
  color: white;
}
.first_switcher__input2:checked+.first_switcher__label2 {
  color: white;
}
.first_switcher__input1:not(:checked)+.first_switcher__label1 {
  color: dimgray;
}
.first_switcher__input2:checked+.first_switcher {
  background: black;
}

<div class = "first_switcher">
    <input type = "radio" name = "balance" id = "on" class = "first_switcher__input1" checked/>
    <label for = "on" class = "first_switcher__label1">ON</label>

    <input type = "radio" name = "balance" id = "off" class = "first_switcher__input2"/>
    <label for = "off" class = "first_switcher__label2">OFF</label>
</div>

вы не можете стилизовать родителя в соответствии с дочерним элементом в css

— 02.10.2018 13:01

вы можете сделать это с помощью js

— 02.10.2018 13:01

Тем не менее, вы можете добиться визуального эффекта, если разместите дополнительный элемент span в конце контейнера, который затем вы позиционируете абсолютно так, чтобы он покрыл весь контейнер (потребуется некоторый z-индекс, чтобы промежуток находился «между ”Фон и входы), а затем измените фон на основе проверенного состояния поля ввода.

— 02.10.2018 13:17

html css input css-animations

02.10.2018 12:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

162

Ответы 3

Вы не можете настроить таргетинг на родителя через CSS, вам нужно использовать JS. Но в селекторе братьев и сестер должны быть пробелы между знаком «+», например:

.first_switcher__input1:checked + .first_switcher__label1 {
  color: white;
}
.first_switcher__input2:checked + .first_switcher__label2 {
  color: white;
}
.first_switcher__input1:not(:checked) + .first_switcher__label1 {
  color: dimgray;
}

02.10.2018 13:07

Используйте JS для этого onchange установите background как родительский (оберните div) и измените css, как показано ниже.

function changeOn(ele){
  if (ele.checked)
  {
     document.getElementsByClassName("first_switcher")[0].style.background = "red";
      document.getElementsByClassName("first_switcher__label2")[0].style.color = "transparent"
  }

}
function changeOff(ele){
  if (ele.checked)
  {
       document.getElementsByClassName("first_switcher")[0].style.background = "dimgray";
      document.getElementsByClassName("first_switcher__label2")[0].style.color = "white"
  }
}

  .first_switcher {
    display: block;
    margin: 0 auto;
    height: 38px;
    margin-top: 50px;
    padding: 0px;
    background: red;
    width: 200px;
    border-radius: 38px;
    position: relative;
    }
    .first_switcher__input2 {
    display: none;
    }
    .first_switcher__input1 {
    display: none;
    }
    .first_switcher__label1 {
    float: left;
    width: 100px;
    font-size: 12px;
    line-height: 38px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    }
    .first_switcher__label2 {
    float: left;
    width: 100px;
    font-size: 12px;
    line-height: 38px;
    color: transparent;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    }
    .first_switcher__input1:checked+.first_switcher__label1 {
    color: white;
    }
    .first_switcher__input2:checked+.first_switcher__label2 {
    color: white;
    }
    .first_switcher__input1:not(:checked)+.first_switcher__label1 {
    color: dimgray;
    }
    .first_switcher__input2:checked+.first_switcher {
    background: black;
    }

  <div class = "first_switcher">
                <input type = "radio" name = "balance" id = "on" class = "first_switcher__input1" onchange = "changeOn(this)" checked/>
                    <label for = "on" class = "first_switcher__label1">ON</label>
      
                <input onchange = "changeOff(this)" type = "radio" name = "balance" id = "off" class = "first_switcher__input2"/>
                    <label for = "off" class = "first_switcher__label2">OFF</label>
    </div>

02.10.2018 13:13

Если вы хотите использовать css, рассмотрите приведенный ниже фрагмент. изменить цвет в соответствии с вашими потребностями.

.first_switcher {
    display: block;
    margin: 0 auto;
    height: 38px;
    margin-top: 50px;
    padding: 0px;
    background: dimgray;
    width: 200px;
    border-radius: 38px;
    position: relative;
    }
    .first_switcher__input2 {
    display: none;
    }
    .first_switcher__input1 {
    display: none;
    }
    .first_switcher__label1 {
    float: left;
    width: 100px;
    font-size: 12px;
    line-height: 38px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    }
    .first_switcher__label2 {
    float: left;
    width: 100px;
    font-size: 12px;
    line-height: 38px;
    color: dimgray;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    }
    .first_switcher__input1:checked+.first_switcher__label1 {
    color: white;
    }
    .first_switcher__input2:checked+.first_switcher__label2 {
    color: white;
    }
    .first_switcher__input1:not(:checked)+.first_switcher__label1 {
    color: dimgray;
    }
    .first_switcher__input2:checked+.first_switcher {
    background: black;
    }
    
    
    /*.first_switcher__input1:checked+.first_switcher__label1 {
    background: red;
}
.first_switcher__input2:not(:checked)+.first_switcher__label2 {
    background: red;
} */
.first_switcher__input1:not(:checked)+.first_switcher__label1 {
    color:blue;
    background: blue;
    border-top-left-radius: 19px;
    border-bottom-left-radius: 19px;
}
.first_switcher__input2:checked+.first_switcher__label2 {
    background: blue;
    border-top-right-radius: 19px;
    border-bottom-right-radius: 19px;
}

<div class = "first_switcher">
                <input type = "radio" name = "balance" id = "on" class = "first_switcher__input1" checked/>
                    <label for = "on" class = "first_switcher__label1">ON</label>
      
                <input type = "radio" name = "balance" id = "off" class = "first_switcher__input2"/>
                    <label for = "off" class = "first_switcher__label2">OFF</label>
    </div>

02.10.2018 13:14

Другие вопросы по теме

Выпадающий список в AgGrid

Угловой конфликт с: Таблица с фиксированным заголовком и фиксированным столбцом на чистом CSS

Добавление задержки к ссылке

Почему высота: 100% не работает с этим div?

Как сделать элементы вертикального списка одинаковой высоты?

Размытие фона PopUp с помощью CSS

Space-around ведет себя по-разному в chrome и firefox, когда столбец / строка одиночные

Список элементов с помощью flexbox - а иногда и ссылки

Эффекты перехода vanilla JS и CSS

Путь не помещается в SVG

Измените цвет фона при проверке ввода

Ответы 3

Другие вопросы по теме

Похожие вопросы