checkbox css

Check box custom css, checkbox disabled css

by Mr_Vasu

HTML

<lable class="input-group">
  <input type="checkbox" checked>
  <span class="checkbox"></span>
  <span class="checkbox-lable">hellow</span>
</lable>
<!-- disabled -->
<lable class="input-group">
  <input type="checkbox" disabled checked>
  <span class="checkbox"></span>
  <span class="checkbox-lable">hellow</span>
</lable>

<lable class="input-group">
  <input type="checkbox">
  <span class="checkbox"></span>
  <span class="checkbox-lable">hellow</span>
</lable>

SCSS

.input-group{
  position:relative;
  display:flex;
  width:100%;
  margin-bottom:10px;
gap:10px;
}
.checkbox-lable{
  display:inline-block;
  font-size:16px;
}
input{
  margin: 0;
  padding: 0;
}
input[type="checkbox"]{
  /* background:red; */
  position:absolute;
  opacity:0;
  cursor:pointer;
  width:18px;
  height:18px;
 /*  custom check box  */
  &+ .checkbox{
      border:1px solid green;
      width:18px;
      height:18px;
      display:inline-block;
      border-radius:2px;
    
      &:after{
        content:"";
        display:inline-block;
        width: 18px;
       height: 18px;
      }
    }
    //after checked custom css 
    &:checked{
      &+ .checkbox{
        &:before{
          content:"";
          display:inline-block;
          background:green;
          width: 18px;
          height: 18px;
        }
        &:after{
          content: "";
          display: inline-block;
          background: transparent;
          width: 8px;
          height: 4px;
          position: absolute;
          border-left: 2px solid white;
          border-bottom: 2px solid #fff;
          transform: rotate(-50deg);
          left: 5px;
          top: 5px;
        }
        
      }
    }
 
    
}
input[type="checkbox"]:disabled{
  position:absolute;
  opacity:0;
  cursor:not-allowed;
  width:18px;
  height:18px;
  /* custom check box css */
  &+ .checkbox{
      border:1px solid red;
      width:18px;
      height:18px;
      display:inline-block;
      vertical-align:middle;
      border-radius:2px;
        &:after{
          content:"";
          display:inline-block;
          vertical-align:middle;
          width: 18px;
          height: 18px;
        }
        /* disbale cursor */
        &+ .checkbox-lable{
          cursor:not-allowed;
        }
    
    }
    /* checked check box */
  &:checked{
      
      &+ .checkbox{
        /* border after checked */
        &:before{
          content:"";
          display:inline-block;
         ...