Question

检查输入后，我无法更改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>

Answer 1

如果要使用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>

Answer 2

您无法通过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;
}

Answer 3

使用JS进行Name=Testperson Age=40 Phone=1234 Money=1000，将onchange设置为parent（wrap div），并如下更改css

background

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

选中输入后更改背景颜色

3 个答案: