Checkbox CSS :checked styling

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>

NiZa · Accepted Answer · 2017-06-28 13:37:02Z

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>

Morpheus · Accepted Answer · 2017-06-28 13:38:08Z

1

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.

answered Jun 28, 2017 at 13:38

Morpheus

9,12613 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Checkbox CSS :checked styling

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related