Custom Checkbox

Sometimes we will see custom checkbox design, this documentation we will give some CSS code to handle the custom checkbox.

You can use this css code if "Accent-color" cannot handle you case

// CSS For custom checkbox

input[type="checkbox"]{
    // set real checkbox 0 to make this not displayed
    width: 0;
    position: relative;
}

input[type="checkbox"]::before{
    opacity: 1;
    font-size: 13px;
    
    //Place Unchecked checkbox asset here
    background: url("Unchecked-checkbox.svg");
    background-color: transparent;
    background-repeat: no-repeat;
    
    position: absolute;
    
    // You can adjust the checkbox position if you need
    // top: -8px;
    left: -20px;
    
    content: ''!important;
    
    // You can adjust the checkbox size if you need
    width: 14px !important;
    height: 14px !important;
 
    display: inline;
    cursor: pointer;
 
}

input[type="checkbox"]:checked::before{
    opacity: 1;
    
    //You can set background color depends your case
    background-color: #fff !important;
    
    //Place checked checkbox asset here
    background: url("Checked-checkbox.svg");
    background-repeat: no-repeat;
    background-size: contain;
    
    //You can adjust position if you need 
    left: -20px!important;
}