INPUT CHECKBOX PRESETS MADE WITH MOD CSS

We are going to show you how to create custom beautiful checkbox button with MOD CSS very easily.
These models can be personalized by you in according your needs.
In all example, we've used boxicons icons. But you can use any other icon library.

To get the code snippet, click to right, on icon


Custom input checkbox

Rounded checkbox with custom glow around edges when it is focused.

HTML
                        
    // We set custom checkbox
    <div :var=".custom-check{ w*h[1.2rem] m.lf[6px] val[middle] co[transparent] ot*ape[none] bg[#e6e6e620] bd[.5px solid #606060] br[20%] 
        && checked: co[#e6e6e6] bg[#12ace9] bd[2px solid #e6e6e6] && focus: bx.sh[0 0px 1px 4px #12ace930] }"></div>
    
    // We set class
    <div :box="p[4px]">
        <label for="">Checkbox 1</label>
        <input type="checkbox" name="rd0" class="bx bx-check custom-check">
    </div>
    
                    

Input checkbox like Bootstrap

Custom checkbox like Bootstrap with purple background-color when it is checked.
Like previous, we use a boxicons icon inside this. You can use any other icon to replace.


Input Checkbox MOD-CSS style

Checkbox with square radius, colored border and another icon. You will see how you can style with any other boxicons icon.

HTML
                        
    // here, we set directly selector
    <div :var="[name=rd0]{ w*h[1.2rem] val[middle] co[transparent] ape[none] bg[#e6e6e620] bd[.5px solid #7d33ff80] br[2px] 
        && checked: bg[#7d33ff] bd.co[none] co[#e6e6e6] && focus: ot[thick double #7d33ff36] }"></div>
    <div>
        <label for="">Checkbox 1</label>
        <input type="checkbox" name="rd0" class="bx bx-power-off">
    </div>
    
                    

Colored checkbox Input

Colored checkbox without icon and colored border. Background-color change when it is checked.

HTML
                        
    // We set selector
    <div :var=[name=rd3]{ w*h[1.2rem] m[4px 6px] val[middle] ape[none] cur[pointer] bg[#e6e6e620] bd[.5px solid #ff4757] br[50%] 
            && hover*checked:bg[#ff4757] bd.co[none] && focus: bx.sh[0 0px 1px 4px #ff475740] }"></div>
    
    //Customize each input
    <div >
        <label for="">Checkbox Red</label>
        <input type="checkbox" name="rd3">
    </div>
    <div >
        <label for="">Checkbox Orange</label>
        <input type="checkbox" name="rd3" :box="bg[#e6e6e620] bd[.5px solid #ff8929] && checked:bg[#ff8929]">
    </div>
    
    <div >
        <label for="">Checkbox Yellow</label>
        <input type="checkbox" name="rd3" :box="bg[#e6e6e620] bd[.5px solid #ffc107d0] 
        && checked:bg[#ffc107d0] && focus: bx.sh[0 0px 1px 4px #e7dc0440]">
    </div>

    <div >
        <label for="">Checkbox Green</label>
        <input type="checkbox" name="rd3" :box="bg[#e6e6e620] bd[.5px solid #198754] 
        && checked:bg[#198754] && focus: bx.sh[0 0px 1px 4px #19875440]">
    </div>
    
                    

Disabled input checkbox

We used disabled attribute to design disabled effect. We called disabled pseudo to style.


Input Checkbox with Icons

In specifics cases, you will want to use specials icons to mean something about that. You can create checkable icons easily with MOD CSS and control its different states.

HTML
                        
    // We set class
    <div :var=".custom-check-4 input{ w*h[2rem] co[gray] p[4px] val[sub !important] ape[none] bg[#f4f4f405] bd[1px solid #404040] br[20%] cu[pointer] 
            && hover*focus*checked: co[#f4f4f4] bg[#7d33ff] && focus: bx.sh[0 0px 1px 4px #19875430] }"></div>
    
    //Adding on parent
    <p :box="d[flex] ju.co[space-evenly]" class="custom-check-4">
            <input type="checkbox" name="rd4" class="bx bx-home bx-sm">
            <input type="checkbox" name="rd4" class="bx bxs-ghost bx-sm">
            <input type="checkbox" name="rd4" class="bx bx-mail-send bx-sm">                   
            <input type="checkbox" name="rd4" class="bx bx-search-alt bx-sm">                   
            <input type="checkbox" name="rd4" class="bx bx-spray-can bx-sm">
        </div>                
    </p>