html - 在 CSS 中选中复选框时更改 H1 的颜色

Question

我正在尝试创建一个性别切换按钮。但是当我尝试为性别图标着色时，它不会改变颜色。我试图在 CSS 中做到这一点。我知道如何用 Javascript 做到这一点，但我在 CSS 中做不到。

这是我的代码。

.switch{
   background-color:white;
   width:30vw;
   height:10vw;
   position:absolute;
   border-radius:30vw;
   border:1vw solid #ccc;
   cursor: pointer;
   user-select: none;
   display:inline-block;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
   content:'';
   width:10vw;
   height:10vw;
   background-color:white;
   position:absolute;
   border-radius:50%;
   top:-10%;
   left:-3%;
   transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;

}
.switch::before{
   border:1vw solid lightblue;
}
.switch::after{
   background:#FBD3E1;
   border:1vw solid pink;
}
input:checked + .switch:before {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid pink;
}
input:checked + .female{
   color:pink;
}
input:checked + .male{
   color:lightblue;
}
input:checked + .switch:after {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid lightblue;
}
.female, .male{
   position:absolute;
   font-weight:lighter;
   color:#ccc;
}
.female{
   z-index:-1;
   top:13%;
   left:2%;
   transform:rotate(180deg);
   font-size:10vw;
}
.male{
   z-index:-1;
   left:87%;
   top:-145%;
   font-size:10vw;
   transform:rotate(-50deg);
}

<div class="container">
   
   <input id="switch" type="checkbox" hidden>
   <label for="switch" class="switch">
      <h1 class="female">✝</h1>
      <h1 class="male">➜</h1>
   </label>
   
</div>

当我单击复选框时，➜ 符号应变为浅蓝色，而当我再次单击该复选框时，+ 符号应变为粉红色。

我尝试使用以下代码，但它不起作用。

input:checked + .female{
   color:pink;
}
input:checked + .male{
   color:lightblue;
}

我哪里做错了。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您还需要使用父类 switch，因为它是 input 的 sibling ，使用 + 时，您只能为 sibling 设置样式并在未选中时更改 h1 的颜色

input + .switch .female{
   color:pink;
}
input:checked + .switch .male{
   color:lightblue;
}
input + .switch .male{
   color:#ccc;
}
input:checked + .switch .female{
   color:#ccc;
}

.switch{
   background-color:white;
   width:30vw;
   height:10vw;
   position:absolute;
   border-radius:30vw;
   border:1vw solid #ccc;
   cursor: pointer;
   user-select: none;
   display:inline-block;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}
.switch::before, .switch::after{
   content:'';
   width:10vw;
   height:10vw;
   background-color:white;
   position:absolute;
   border-radius:50%;
   top:-10%;
   left:-3%;
   transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;

}
.switch::before{
   border:1vw solid lightblue;
}
.switch::after{
   background:#FBD3E1;
   border:1vw solid pink;
}
input:checked + .switch:before {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid pink;
}
input + .switch .female{
   color:pink;
}
input:checked + .switch .male{
   color:lightblue;
}
input + .switch .male{
   color:#ccc;
}
input:checked + .switch .female{
   color:#ccc;
}
input:checked + .switch:after {
   background: #D3F0FB;
   transform: translateX(165%);
   border:1vw solid lightblue;
}
.female, .male{
   position:absolute;
   font-weight:lighter;
   color:#ccc;
}
.female{
   z-index:-1;
   top:13%;
   left:2%;
   transform:rotate(180deg);
   font-size:10vw;
}
.male{
   z-index:-1;
   left:87%;
   top:-145%;
   font-size:10vw;
   transform:rotate(-50deg);
}

<div class="container">
   
   <input id="switch" type="checkbox" hidden>
   <label for="switch" class="switch">
      <h1 class="female">✝</h1>
      <h1 class="male">➜</h1>
   </label>
   
</div>