选中的复选框不起作用。 HTML CSS答案

【问题标题】：Checkbox checked is not working. HTML CSS选中的复选框不起作用。 HTML CSS
【发布时间】：2021-01-22 15:00:22
【问题描述】：

我正在使用复选框方法创建滑动导航栏。

[但仅出于演示目的，我将背景更改为“蓝色”]

我使用了标签，如果选中了复选框，它的背景会变为“蓝色”。但它不起作用

请解释原因？？？

[查看代码在https://codepen.io/adi45code/pen/abmxgQj]

HTML

<div class="position-right">
        <div class="nav-ele home">Home</div>
        <div class="nav-ele about">About</div>
        <div class="nav-ele services">Service</div>
        <div class="nav-ele goals">Goals</div>
        <div class="nav-ele contactus">Contact Us</div>
      </div>
      
      <!--Checkbox Toogle-->
     <input type="checkbox" id="checkbox"/>
    <label for="checkbox"><span>ColorRed</span></label>

CSS

  .position-right {
    flex-direction: column;
    background: #000000;
    width: 50%;
    height: 200px;
    text-align: center;
    transition: all .2s;
    position: absolute;
    left: -10px;
    color: red;
  }
  #checkbox:checked +.position-right {
    background: blue;
  }
  
span,input{
  position: absolute;
  right: 0;
  padding :10px;
}
input{
  top: 30px;
}
span:hover{
  color: red;
}

【问题讨论】：

标签： html css checkbox navbar ischecked

【解决方案1】：

问题在于 ,,+,, 选择器仅针对 ,,+,, 选择器左侧元素的下一个兄弟元素（在您的情况下，是您的复选框）。

因为label 是复选框的下一个兄弟，所以您的代码将无法工作。

您所要做的就是替换div 和checkbox 的位置，这样div 就会出现在复选框之后（另外，您必须将标签放在复选框之前，而不是之后） .

这是固定版本，希望对你有所帮助:)

https://codepen.io/Juka99/pen/vYXMoOY

【讨论】：

【解决方案2】：

你必须改变输入复选框的位置，因为,+，选择器只针对下一个兄弟

  .position-right {
    flex-direction: column;
    background: #000;
    width: 50%;
    height: 200px;
    text-align: center;
    transition: all .2s;
    position: absolute;
    left: -10px;
    color: red;
  }
  #checkbox:checked + .position-right {
    background: blue;
  }
  
span,input{
  position: absolute;
  right: 0;
  padding :10px;
}
input{
  top: 30px;
}
span:hover{
  color: red;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style.css" title="" type="" />
</head>

<body>
      <!--layout--> 
   <!--Checkbox Toogle-->
     <label for="checkbox"><span>ColorBlue</span></label>
     <input type="checkbox" id="checkbox"/>
    
      <div class="position-right">
        <div class="nav-ele home">Home</div>
        <div class="nav-ele about">About</div>
        <div class="nav-ele services">Service</div>
        <div class="nav-ele goals">Goals</div>
        <div class="nav-ele contactus">Contact Us</div>
      </div>
</body>

</html>

【讨论】：