Change the background color when an input is checked

Question

I can't change the background of my div when an input is checked. When I check the second input the background of the div should change, possibly with an animation from left to right. Is there anyone who can help me? This is the 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>

You could achieve the visual effect though, if you placed an additional `span` element at the end of the container - that you then position absolutely, so that it covers the full container (will need some z-index, so that the span sits “between” the background and the inputs), and then change the background of that based in input field checked status. — misorude, Oct 02 '18 at 11:17

score 1 · Answer 1 · answered Oct 02 '18 at 11:14

If you want to do with css then consider below snippet. change color according to your need.

.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>

score 0 · Answer 2 · answered Oct 02 '18 at 11:07

You can't target parent via CSS, you have to use JS. But those siblings selector should have spaces between "+", like:

.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;
}

score 0 · Answer 3 · answered Oct 02 '18 at 11:13

Use JS to do it onchange set background to parent(wrap div) and change css as below

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>

Change the background color when an input is checked

3 Answers3