Изменить цвет H1, когда флажок установлен в CSS

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>

Когда я нажимаю флажок, символ ➜ должен измениться на светло-синий, а когда я снова нажму на флажок * символ 1012 * должен измениться на розовый.

Я пытался использовать следующий код, но он не работает.

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

Где я делаю не так.

Любая помощь будет оценена.

Спасибо.

Answer 1

Вам необходимо использовать родительский класс switch также потому, что это братья и сестры ввода, и с помощью + вы можете использовать стиль только для братьев и сестер и изменять цвет 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>