title: Checkbox CSS :checked styling
body: <p>I'm trying to understand where the problem in my CSS is, but I really don't have any clue what is wrong.</p>
  
  <p>Basically, I'm styling the default checkbox style with CSS. It works well until you try to check the checkbox. </p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>Please find the code below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;     
            &lt;input type="checkbox" id="chkProdTomove"  /&gt;
            &lt;span class="check-box-effect"&gt;&lt;/span&gt;
          &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>