Checkbox CSS :checked styling - html

Question

I'm trying to understand where the problem in my CSS is, but I really don't have any clue what is wrong.
Basically, I'm styling the default checkbox style with CSS. It works well until you try to check the checkbox.
The idea behind my code is when you check the checkbox, it should increase the size and change the background colour to red. In addition, it should keep the style till you unchecked the box (manually).
Do you have any idea where the problem is? In my opinion the problem is where the "input[type="checkbox"]:checked .check-box-effect {" begins.
Please find the code below
label {
display: inline-block;
color: #fff;
cursor: pointer;
position: relative;
}
label .check-box-effect {
display: inline-block;
position: relative;
background-color: transparent;
width: 25px;
height: 25px;
border: 2px solid #dcdcdc;
border-radius: 10%;
}
label .check-box-effect:before {
content: "";
width: 0px;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(45deg);
top: 13px;
left: 9px;
transition: width 50ms ease 50ms;
transform-origin: 0% 0%;
}
label .check-box-effect:after {
content: "";
width: 0;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(305deg);
top: 16px;
left: 10px;
transition: width 50ms ease;
transform-origin: 0% 0%;
}
label:hover .check-box-effect:before {
width: 5px;
transition: width 100ms ease;
}
label:hover .check-box-effect:after {
width: 10px;
transition: width 150ms ease 100ms;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
input[type="checkbox"]:checked .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover .check-box-effect {
background-color: #dcdcdc;
transform: scale(1.25);
}
input[type="checkbox"]:checked:hover .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
<label>
<input type="checkbox" id="chkProdTomove" />
<span class="check-box-effect"></span>
</label>

Answer 1

You need to change all checked selectors to this:
input[type="checkbox"]:checked + .check-box-effect:before
label {
display: inline-block;
color: #fff;
cursor: pointer;
position: relative;
}
label .check-box-effect {
display: inline-block;
position: relative;
background-color: transparent;
width: 25px;
height: 25px;
border: 2px solid #dcdcdc;
border-radius: 10%;
}
label .check-box-effect:before {
content: "";
width: 0px;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(45deg);
top: 13px;
left: 9px;
transition: width 50ms ease 50ms;
transform-origin: 0% 0%;
}
label .check-box-effect:after {
content: "";
width: 0;
height: 2px;
border-radius: 2px;
background: #626262;
position: absolute;
transform: rotate(305deg);
top: 16px;
left: 10px;
transition: width 50ms ease;
transform-origin: 0% 0%;
}
label:hover .check-box-effect:before {
width: 5px;
transition: width 100ms ease;
}
label:hover .check-box-effect:after {
width: 10px;
transition: width 150ms ease 100ms;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
input[type="checkbox"]:checked + .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked + .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover + .check-box-effect {
background-color: #dcdcdc;
transform: scale(1.25);
}
input[type="checkbox"]:checked:hover + .check-box-effect:after {
width: 10px;
background: #333;
transition: width 150ms ease 100ms;
}
input[type="checkbox"]:checked:hover + .check-box-effect:before {
width: 5px;
background: #333;
transition: width 150ms ease 100ms;
}
<label>
<input type="checkbox" id="chkProdTomove" />
<span class="check-box-effect"></span>
</label>

Answer 2

You need to target the next element when the checkbox is checked:
input[type="checkbox"]:checked + .check-box-effect {
background-color: red !important;
transform: scale(1.25);
}
Your current code is trying to target the .check-box-effect if it would be a child of the checkbox.