Checkboxes are a core part of HTML forms, yet the default style is often too plain for modern web design. If you're building a website or app, adding unique CSS checkbox styles can enhance the user experience and make your design stand out.
This article showcases free custom checkbox styles created using pure HTML and CSS—no JavaScript or external libraries required. Whether you’re a developer, designer, or beginner learning check box HTML, this collection will help you replace the boring default checkbox with something stylish and interactive.
Why Customize a Checkbox?
- Improve your website's design and branding
- Match checkbox styles with your UI theme (light, dark, colorful, minimal)
- Enhance accessibility and user interaction
- Make forms more user-friendly and visually appealing
How to Use Custom Checkboxes
Here’s a basic example of how checkboxes work in HTML:
<label>
<input type="checkbox" />
I agree to the terms
</label>
With just HTML, the checkbox is functional but unstyled. By adding CSS, we can completely customize the look and feel.
Live Custom Checkbox Styles
Below are unique, ready-to-use CSS checkbox styles that you can copy and paste directly into your project.
alphaarp-checkbox-1
Modern SVG Checkbox with Light & Dark Mode Support
Preview:
<div class="alphaarp-checkbox-1">
<input id="alphaarp-example-1" class="substituted" type="checkbox" aria-hidden="true" />
<label for="alphaarp-example-1">Checkbox</label>
</div>
<style>
.alphaarp-checkbox-1 *, .alphaarp-checkbox-1 ::after, .alphaarp-checkbox-1 ::before {box-sizing:border-box}
.alphaarp-checkbox-1 [type=checkbox].substituted {margin:0;width:0;height:0;display:inline;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.alphaarp-checkbox-1 [type=checkbox].substituted+label:before {content:"";display:inline-block;vertical-align:top;height:1.15em;width:1.15em;margin-right:0.6em;color:rgba(0,0,0,0.275);border:solid 0.06em;box-shadow:0 0 0.04em,0 0.06em 0.16em -0.03em inset,0 0 0 0.07em transparent inset;border-radius:0.2em;background:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center,white;background-size:0;will-change:color,border,background,background-size,box-shadow;transform:translate3d(0,0,0);transition:color 0.1s,border 0.1s,background 0.15s,box-shadow 0.1s}
.alphaarp-checkbox-1 [type=checkbox].substituted:enabled:active+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted:enabled+label:active:before {box-shadow:0 0 0.04em,0 0.06em 0.16em -0.03em transparent inset,0 0 0 0.07em rgba(0,0,0,0.1) inset;background-color:#f0f0f0}
.alphaarp-checkbox-1 [type=checkbox].substituted:checked+label:before {background-color:#3B99FC;background-size:0.75em;color:rgba(0,0,0,0.075)}
.alphaarp-checkbox-1 [type=checkbox].substituted:checked:enabled:active+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted:checked:enabled+label:active:before {background-color:#0a7ffb;color:rgba(0,0,0,0.275)}
.alphaarp-checkbox-1 [type=checkbox].substituted:focus+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted:focus:active+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted:focus+label:active:before {box-shadow:0 0 0.04em,0 0.06em 0.16em -0.03em transparent inset,0 0 0 0.07em rgba(0,0,0,0.1) inset,0 0 0 3.3px rgba(65,159,255,0.55),0 0 0 5px rgba(65,159,255,0.3)}
.alphaarp-checkbox-1 [type=checkbox].substituted:disabled+label:before {opacity:0.5}
.alphaarp-checkbox-1 [type=checkbox].substituted.dark+label:before {color:rgba(255,255,255,0.275);background-color:#222;background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34,34,34,0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>')}
.alphaarp-checkbox-1 [type=checkbox].substituted.dark:enabled:active+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted.dark:enabled+label:active:before {background-color:#444;box-shadow:0 0 0.04em,0 0.06em 0.16em -0.03em transparent inset,0 0 0 0.07em rgba(255,255,255,0.1) inset}
.alphaarp-checkbox-1 [type=checkbox].substituted.dark:checked+label:before {background-color:#a97035;color:rgba(255,255,255,0.075)}
.alphaarp-checkbox-1 [type=checkbox].substituted.dark:checked:enabled:active+label:before,
.alphaarp-checkbox-1 [type=checkbox].substituted.dark:checked:enabled+label:active:before {background-color:#c68035;color:rgba(0,0,0,0.275)}
.alphaarp-checkbox-1 [type=checkbox].substituted+label {-webkit-user-select:none;user-select:none}
</style>
alphaarp-checkbox-2
iOS-style Toggle Switch with Smooth Animation
Preview:
<div class="checkbox-wrapper-2">
<input type="checkbox" class="sc-gJwTLC ikxBAC" />
</div>
<style>
.checkbox-wrapper-2 .ikxBAC {
appearance: none;
background-color: #dfe1e4;
border-radius: 72px;
border-style: none;
flex-shrink: 0;
height: 20px;
margin: 0;
position: relative;
width: 30px;
}
.checkbox-wrapper-2 .ikxBAC::before {
bottom: -6px;
content: "";
left: -6px;
position: absolute;
right: -6px;
top: -6px;
}
.checkbox-wrapper-2 .ikxBAC,
.checkbox-wrapper-2 .ikxBAC::after {
transition: all 100ms ease-out;
}
.checkbox-wrapper-2 .ikxBAC::after {
background-color: #fff;
border-radius: 50%;
content: "";
height: 14px;
left: 3px;
position: absolute;
top: 3px;
width: 14px;
}
.checkbox-wrapper-2 input[type=checkbox] {
cursor: default;
}
.checkbox-wrapper-2 .ikxBAC:hover {
background-color: #c9cbcd;
transition-duration: 0s;
}
.checkbox-wrapper-2 .ikxBAC:checked {
background-color: #6e79d6;
}
.checkbox-wrapper-2 .ikxBAC:checked::after {
background-color: #fff;
left: 13px;
}
.checkbox-wrapper-2 :focus:not(.focus-visible) {
outline: 0;
}
.checkbox-wrapper-2 .ikxBAC:checked:hover {
background-color: #535db3;
}
</style>
(Repeat for your next checkboxes using class names like alphaarp-checkbox2, alphaarp-checkbox3, etc.)
Tips for Creating More Checkbox Styles
- Use
::beforeor::afterpseudo-elements for icons - Try gradients, shadows, and transitions for effects
- Add hover or focus animations
- Use CSS variables for easy customization
Download All Styles
Soon, you’ll be able to download a ZIP file of all HTML + CSS checkbox code snippets.
Conclusion
Custom checkboxes are simple to implement and can greatly improve your interface design. Bookmark this page and check back for more creative check box HTML designs.
Want more? Follow AlphaARP for fresh HTML, CSS, and JavaScript UI elements and generators.
