> For the complete documentation index, see [llms.txt](https://madeindonesia.gitbook.io/mi-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://madeindonesia.gitbook.io/mi-guide/common-issue/custom-checkbox.md).

# 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;
}
```