css can´t change toggle background color - html

Question

I found this a nemorphism toggle and can´t figure out how to change the background if checked. I am aware how basic this question is. I did it several times with basic toggle checkboxes but it seems either I am confused or this design pattern is ignoring my attempts.
So far I tried different solutions as:
input[type="checkbox"]:checked {
background: red
}
or
.toggle:checked {
background: red
}
Unfortunately none of them does the job. I am aware its a basic question and thought you guys could direct me to the correct solution as I am struggling.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>

Answer 1

You're trying to apply background on the input but the indicator class is overriding it. Why not give the property to the indicator class itself?
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox] {
background: yellow
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
background: red;
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>

Answer 2

You don't have to put the input inside the div, you can put it before it and as long as it's in the label it will work fine. And then you can update the selectors
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
transition: background 0.3s ease;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
input[type=checkbox] +.toggle { /* Now you can select the div next to the input */
background: yellow
}
.toggle-state:checked + .toggle {
background: red;
}
.toggle-state:checked + .toggle .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="toggle">
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>

Answer 3

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'IBM Plex Sans Condensed', sans-serif;
font-weight: 300;
background-color: #ecf0f3;
}
.label {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.label-text {
margin-left: 16px;
}
.toggle {
position: relative;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
input[type=checkbox]:checked ~ .indicator {
background: red;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="label">
<div class="toggle">
<input class="toggle-state" type="checkbox" name="check" value="check" />
<div class="indicator"></div>
</div>
<div class="label-text">change toggle background</div>
</label>