Checkbox Css :checked Styling

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 u

Solution 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><inputtype="checkbox"id="chkProdTomove"  /><spanclass="check-box-effect"></span></label>

Solution 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.