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.
// 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.
// 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.
// 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.
// 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>