46 Creative CSS Checkbox Examples

Default browser checkboxes look dated. They also render inconsistently across Chrome, Firefox, Safari, and Edge.

These CSS checkboxes examples show you how to build custom form controls that match your design system perfectly.

You’ll learn styling techniques using pseudo-elements, the accent-color property, and pure CSS animations. No JavaScript required for most implementations.

This guide covers toggle switches, round checkboxes, animated checkmarks, and accessible implementations that work with screen readers and keyboard navigation.

Each example includes working code you can copy directly into your frontend projects.

What is a CSS Checkbox

A CSS checkbox is a styled version of the standard HTML input element that allows users to select one or more options from a set.

Native browser checkboxes look outdated. They also render differently across Chrome, Firefox, Safari, and Edge.

Custom styling with CSS fixes both problems. You get full control over colors, sizes, animations, and checked state indicators.

These form controls appear everywhere: settings panels, to-do lists, survey forms, e-commerce filters, newsletter signups.

The checkbox remains a boolean selection tool at its core. Checked or unchecked. True or false.

CSS checkbox examples

Modern Checkbox Collection – 6 Production-Ready Designs

See the Pen
Modern Checkbox Collection – 6 Production-Ready Designs by Bogdan Sandu (@bogdansandu)
on CodePen.

A curated collection of beautiful, functional checkbox styles built with pure CSS and HTML. Each design features smooth animations, hover effects, and is fully accessible without any JavaScript.

Includes:

• Toggle Switch – iOS-style toggle for settings
• iOS Radio Style – Elegant circular selection
• Classic Checkmark – Traditional with bounce animation
• Plus/Minus Toggle – Perfect for add/remove actions
• Slide Reveal – Dynamic fill effect
• Heart Favorite – Animated heart for likes/favorites

Lavish Fancy Checkbox

See the Pen
Fancy checkbox by Ana Tudor (@thebabydino)
on CodePen.

User-Loving Checkbox V04

Smooth Animated CSS3 Checkbox

See the Pen
Animated CSS3 Checkbox by Jimmy Gillam (@theigmo87)
on CodePen.

Dynamic Checkbox V05

Stylish CSS3 Checkbox Vibes

See the Pen
CSS3 Checkbox Styles by Álvaro (@alvarotrigo)
on CodePen.

Creative Blend Checkbox V15

Versatile Checkbox Styles

See the Pen
Checkbox styles by Álvaro (@alvarotrigo)
on CodePen.

Depth-Loving Neuomorphic Checkboxes

See the Pen
Neuomorphic Checkboxes by Braydon Coyer (@braydoncoyer)
on CodePen.

Fun Emojibox – Checkbox

See the Pen
✅ Emojibox – Checkbox with emojis by Jouan Marcel (@jouanmarcel)
on CodePen.

Neat Checkbox Trickery: To-Do Style

See the Pen
Checkbox Trickery: To-Do List by Will Boyd (@lonekorean)
on CodePen.

Sophisticated Checkbox Styles with SVG

See the Pen
Checkbox Styles using SVG by Álvaro (@alvarotrigo)
on CodePen.

Eclectic Animating Checkboxes with CSS3

See the Pen
Animating Checkboxes with CSS3 by Álvaro (@alvarotrigo)
on CodePen.

Pure Jelly Checkbox

See the Pen
Jelly Checkbox by Andreas Storm (@avstorm)
on CodePen.

Intriguing Flip Checkbox

See the Pen
Flip checkbox by Andreas Storm (@avstorm)
on CodePen.

Wavy CodePenChallenge – Checkbox

See the Pen
#CodePenChallenge – Checkbox by Andreas Storm (@avstorm)
on CodePen.

Clean Shift & Check Boxes

See the Pen
Shift & Check Boxes by thu nguyen (@alilthumuch)
on CodePen.

Animated Todo List Checkbox Magic

See the Pen
☑️ CSS-only Todo List Checkbox Animation by Shaw (@shshaw)
on CodePen.

Diverse CSS3 Checkbox Moods

See the Pen
CSS3 Checkbox Styles by Brad Bodine (@bbodine1)
on CodePen.

Glossy Gooey Checkbox (For Chrome Lovers)

See the Pen
Gooey Checkbox by Andreas Storm (@avstorm)
on CodePen.

Checkbox Drama with mo.js

See the Pen
checkbox with mo.js 💵 by Mike Quinn (@mprquinn)
on CodePen.

Ripple Magic

See the Pen
Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wtaype)
on CodePen.

Color Burst Checkboxes

See the Pen
Styling checkboxes and radio buttons with CSS by 8bit code (@8bitcode)
on CodePen.

Dash of Materialize

See the Pen
materialize dash by Hassan (@hassansalman)
on CodePen.

Jolly Little Checkboxes

See the Pen
Happy little checkboxes (updated) by Branko Stancevic (@landb)
on CodePen.

Clean and Snazzy Checkboxes

See the Pen
pretty pure CSS checkboxes and radio buttons by cesque (@cesque)
on CodePen.

Google Vibes: Material Style

See the Pen
Google material style checkbox (css only) by Sam (@Sambego)
on CodePen.

SVG Marker: The Custom Champ

See the Pen
Custom checkbox with svg marker by Tommy Rolchau Mathiesen (@rolchau)
on CodePen.

Smooth Moves: CSS Checkbox Moves

See the Pen
Checkbox animation – CSS by Hoonseok Park (@parcon)
on CodePen.

Todo? More Like To-Done!

See the Pen
Todo Checkbox by Katherine Kato (@kathykato)
on CodePen.

Fontastic CSS3 Checkboxes

See the Pen
Pure CSS3 Checkboxes with FontAwesome by foxeisen (@foxeisen)
on CodePen.

Skateboarding on CSS Waves

See the Pen
Pure CSS Skateboard Checkbox by Adam Kuhn (@cobra_winfrey)
on CodePen.

Sleek & Modern Boxes

See the Pen
Check boxes by Álvaro (@alvarotrigo)
on CodePen.

Ripple Vibes Over Here

See the Pen
CSS “Ripple/Wave” checkbox and radio button by Matt Sisto (@msisto)
on CodePen.

Locked & Loaded

See the Pen
Lock by Andreas Storm (@avstorm)
on CodePen.

Adorable Little Things

See the Pen
Cute skeuomorphic checkboxes by LukyVJ (@LukyVj)
on CodePen.

Bordered Fun

See the Pen
Checkbox ft. border-radius by Preethi Sam (@rpsthecoder)
on CodePen.

Windows Feels, Anyone?

See the Pen
Windows 10 inspired pure CSS checkbox switch by Álvaro (@alvarotrigo)
on CodePen.

Tile Me Up

See the Pen
Checkbox group styled as tiles by Håvard Brynjulfsen (@havardob)
on CodePen.

Unboxed Magic

See the Pen
Custom Checkbox by mattdrose (@mattdrose)
on CodePen.

Flowing Goodness

See the Pen
Fluid Checkboxes by Bjorn (@BjornRombaut)
on CodePen.

The Next Gen Style

See the Pen
Checkbox Style 2.0 – SCSS by Lorenzo D’Ianni (@lorenzodianni)
on CodePen.

Triple Threat

See the Pen
Quick CSS checkbox styles by Álvaro (@alvarotrigo)
on CodePen.

Dance of the Checkboxes

See the Pen
[Pure CSS] Delightful Checkbox Animation by Dylan Raga (@dylanraga)
on CodePen.

Talking the Lingo

See the Pen
Semantic CSS Animated Checkboxes by Demetri Ganoff (@dganoff)
on CodePen.

Pedro’s Pick

See the Pen
Chekboxes CSS by Pedro Campos (@pedrocampos)
on CodePen.

Stefan’s Style

See the Pen
Stylish Checkbox by Stefan Judis (@stefanjudis)
on CodePen.

How Does a CSS Checkbox Work

The checkbox starts with an HTML input element paired with a label.

Here is the basic structure:

• <input type="checkbox"> creates the actual form control
• <label> provides clickable text and accessibility
• The for attribute connects label to input via matching id

When a user clicks the checkbox (or its label), the browser toggles the checked state.

CSS detects this state change through the :checked pseudo-class. That selector lets you apply different styles when the box is ticked.

Form submission sends the checkbox value to the server only when checked. Unchecked boxes transmit nothing.

The label association matters for web accessibility. Screen readers announce the label text, and users can click anywhere on that text to toggle the checkbox.

What are the Types of CSS Checkboxes

Checkbox designs fall into several categories based on visual style and interaction patterns.

Default Browser Checkbox

The native checkbox renders without custom styles. Quick to implement but inconsistent across browsers and operating systems.

Custom Styled Checkbox

Hides the default input and replaces it with styled pseudo-elements. Full design control using ::before and ::after selectors.

Toggle Switch Checkbox

A horizontal sliding control that resembles iOS or Android switches. Check out CSS toggle switch examples for implementation patterns.

Animated Checkbox

Includes transition effects or CSS keyframes for state changes. Checkmarks can draw, fade, bounce, or scale into view.

Round Checkbox

Uses border-radius: 50% to create circular selection controls. Common in radio-style designs where only visual distinction matters.

Icon Checkbox

Replaces the standard checkmark with SVG icons, Font Awesome symbols, or Unicode characters like stars and hearts.

How to Style a Checkbox with CSS

Styling checkboxes requires hiding the native input and building a custom replacement.

Hide the Default Checkbox

Use appearance: none to strip browser styling. Alternatively, set opacity: 0 or position: absolute with clipping.

Create the Visual Container

The label element becomes your styling canvas. Apply width, height, background-color, and border properties to the ::before pseudo-element.

Style the Checked Indicator

The ::after pseudo-element typically holds the checkmark. Build it with borders rotated 45 degrees, or use the content property for Unicode symbols.

Key CSS Properties

• appearance: none removes native styling
• accent-color changes the default checkbox color (modern browsers)
• border-radius rounds corners or creates circles
• transition adds smooth state changes
• transform: scale() creates size-based hover effects

The :checked pseudo-class targets the selected state. Combine it with sibling selectors to style adjacent elements.

How to Create a Custom Checkbox with CSS

This step-by-step approach builds a checkbox from scratch using pure CSS.

Step One: HTML Structure

Wrap the input and label together. The input needs a unique id that matches the label’s for attribute.

“ <div class="checkbox-wrapper"> <input type="checkbox" id="custom-check"> <label for="custom-check">Accept terms</label> </div> `

Step Two: Hide Native Input

Position the input off-screen or use appearance: none. Keep it in the DOM for form functionality and keyboard navigation.

` .checkbox-wrapper input { position: absolute; opacity: 0; cursor: pointer; } `

Step Three: Build the Box

Style the label’s ::before element as your visible checkbox container.

` .checkbox-wrapper label::before { content: ""; width: 20px; height: 20px; border: 2px solid #333; display: inline-block; margin-right: 10px; vertical-align: middle; } `

Step Four: Add the Checkmark

Create a checkmark using rotated borders on the ::after pseudo-element. Show it only when checked.

` .checkbox-wrapper input:checked + label::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 12px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); } `

This technique works across all major browsers. Add transition properties for smooth CSS animation between states.

For accessible forms, include focus states using :focus-visible on the input and styling the adjacent label accordingly.

How to Make a Checkbox Look Like a Toggle Switch

Toggle switches use a sliding knob inside a pill-shaped container. The checkbox input stays hidden while CSS handles all visuals.

Build the track with a wide, rounded label::before element. Create the knob using label::after as a circle positioned inside.

` .toggle-switch label::before { content: ""; width: 50px; height: 26px; background: #ccc; border-radius: 13px; display: block; }

.toggle-switch label::after { content: “”; width: 22px; height: 22px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }

.toggle-switch input:checked + label::after { transform: translateX(24px); } `

The transform: translateX() slides the knob on state change. Add transition for smooth movement.

Change the track background-color when checked to show active state. Green (#4CAF50) signals “on” in most user interface conventions.

How to Add Animation to a Checkbox

Animated checkboxes create micro-interactions that improve visual feedback during state changes.

Transition-Based Animation

Apply transition to opacity, transform, or background-color properties. Duration between 150ms and 300ms feels responsive without lag.

` .checkbox label::after { opacity: 0; transform: scale(0); transition: all 0.2s ease-in-out; }

.checkbox input:checked + label::after { opacity: 1; transform: scale(1); } `

Keyframe Animation

Complex sequences need @keyframes. Draw the checkmark stroke, bounce the element, or create ripple effects on click.

` @keyframes checkmark-draw { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } }

.checkbox input:checked + label svg { animation: checkmark-draw 0.3s ease forwards; } `

Scale and Rotate Effects

Combine transform: scale() with rotate() for dynamic checkmark appearance. The cubic-bezier timing function adds bounce.

What CSS Properties Control Checkbox Appearance

Several CSS properties directly affect how checkboxes render in browsers.

• appearance: none strips all native browser styling

• accent-color sets the fill color for default checkboxes

• width and height control dimensions

• border defines outline thickness, style, and color

• border-radius rounds corners (use 50% for circles)

• background-color fills the checkbox area

• cursor: pointer shows clickability on hover

• outline handles focus ring visibility

Pseudo-elements (::before, ::after) accept most box model properties plus content for generated elements.

The :checked, :hover, :focus, and :disabled pseudo-classes target specific interaction states.

How to Change Checkbox Color with CSS

Two approaches exist for checkbox color customization: the modern accent-color property or full custom styling.

Using accent-color

One line changes the default checkbox fill. Works in Chrome 93+, Firefox 92+, Safari 15.4+, and Edge 93+.

` input[type="checkbox"] { accent-color: #e91e63; } `

Custom Color Styling

Hide the native input, then apply any background-color or CSS gradient to pseudo-elements. Unlimited color options including transparency.

` .custom-checkbox label::before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } `

State-Based Colors

Change colors based on checked, hover, focus, or disabled states. Each pseudo-class can have distinct color values.

How to Style a Checked State in CSS

The :checked pseudo-class activates when the checkbox is selected.

Target it directly on the input or combine with adjacent sibling selector (+) to style the label.

` / Direct input styling / input[type="checkbox"]:checked { background-color: #2196F3; }

/ Adjacent label styling / input[type=”checkbox”]:checked + label { color: #2196F3; text-decoration: line-through; }

/ Pseudo-element visibility / input[type=”checkbox”]:checked + label::after { display: block; } `

Common checked state changes: show/hide checkmark, swap background colors, add CSS shadow effects, strike through label text.

How to Create a Round Checkbox

Round checkboxes use border-radius: 50% on the container element.

` .round-checkbox label::before { content: ""; width: 24px; height: 24px; border: 2px solid #757575; border-radius: 50%; display: inline-block; }

.round-checkbox input:checked + label::before { background-color: #4CAF50; border-color: #4CAF50; } `

The checkmark inside can stay angular or curve to match. Some designs use a centered dot instead of a traditional tick.

Round checkboxes work well alongside radio buttons where visual consistency matters more than semantic distinction.

What is the accent-color Property for Checkboxes

The accent-color property provides native checkbox tinting without hiding the default input.

Single declaration. No pseudo-elements required. Works on checkboxes, radio buttons, range sliders, and progress bars.

` input[type="checkbox"] { accent-color: rebeccapurple; width: 20px; height: 20px; } `

Browser Support

Chrome 93+, Firefox 92+, Edge 93+, Safari 15.4+. Check cross-browser compatibility tables before production use.

Limitations

Only changes the fill color. No control over shape, checkmark style, or animation. Custom styling still needed for complex designs.

How to Make Checkboxes Accessible

Accessible checkboxes work for keyboard users, screen readers, and those with visual impairments.

Label Association

Always connect labels using for and id attributes. Screen readers announce the label text when the checkbox receives focus.

Keyboard Navigation

Keep the input element in the DOM even when visually hidden. Users toggle with Space key; Tab moves between controls.

Focus States

Never remove focus outlines completely. Style :focus-visible to show keyboard focus while hiding mouse click focus rings.

` .checkbox input:focus-visible + label::before { outline: 2px solid #2196F3; outline-offset: 2px; } `

ARIA Attributes

Use ARIA labels when visual labels aren’t present. Add aria-describedby for additional context on complex forms.

Color Contrast

Meet WCAG AA standards: 4.5:1 ratio for text, 3:1 for UI components. Test color contrast between checkbox borders and backgrounds.

What are Common Checkbox Design Patterns

Design systems define specific checkbox styles that match broader UI conventions.

Material Design

Square with rounded corners, ripple effect on click, animated checkmark that draws in. Uses elevation and bold accent colors.

iOS Style

Round corners, subtle shadows, green toggle switches. Minimal and clean with smooth sliding animations.

Flat Design

No shadows or gradients. Solid colors, sharp or slightly rounded corners. Relies on color change for state indication.

Neumorphism

Soft shadows that create pushed/pulled depth effects. Check CSS neumorphism techniques for implementation details.

Glassmorphism

Translucent backgrounds with backdrop blur. Works with the CSS glassmorphism generator for quick prototyping.

How to Create Checkbox Groups with CSS

Checkbox groups contain multiple related options styled consistently.

Wrap the group in a <fieldset> with <legend> for semantic structure and accessibility.

Use flexbox or grid system layout for horizontal or multi-column arrangements.

Consistent spacing between items matters. Apply equal margins using gap property or matching margin values.

What Browsers Support Custom CSS Checkboxes

Custom checkbox support depends on the techniques used.

Pseudo-element techniques have the widest support. The :checked pseudo-class works everywhere. Use vendor prefixes for older browser versions. Autoprefixer handles this automatically in build processes.

How to Use CSS Variables for Checkbox Styling

CSS custom properties (variables) enable consistent theming across checkbox components.

Define variables at the root level or component scope. Reference them throughout your checkbox styles.

:root { 
    --checkbox-size: 20px; 
    --checkbox-border: #757575; 
    --checkbox-checked: #2196F3; 
    --checkbox-radius: 4px; 
}

.checkbox label::before { 
    width: var(--checkbox-size); 
    height: var(--checkbox-size); 
    border: 2px solid var(--checkbox-border); 
    border-radius: var(--checkbox-radius); 
}

.checkbox input:checked + label::before { 
    background-color: var(--checkbox-checked); 
    border-color: var(--checkbox-checked); 
}

Change one variable to update all checkboxes. Perfect for dark mode toggles, brand color updates, or size adjustments.

Override variables at the component level for specific checkbox variants while keeping the base structure intact.

FAQ on CSS Checkboxes Examples

How do I style a checkbox with CSS?

Hide the native input using appearance: none or opacity: 0. Then style the label’s ::before and ::after pseudo-elements as your visible checkbox and checkmark. The :checked pseudo-class applies styles when selected.

Can I change checkbox color without JavaScript?

Yes. Use the accent-color property for quick native checkbox tinting in modern browsers. For full control, hide the default input and apply any background-color or gradient to custom pseudo-elements.

How do I hide the default checkbox appearance?

Apply appearance: none to remove browser styling completely. Alternatively, use position: absolute with opacity: 0 to hide visually while keeping the input functional for accessible typography and screen readers.

What is the :checked pseudo-class?

The :checked pseudo-class targets checkboxes and radio buttons in their selected state. Combine it with adjacent sibling selectors to style labels, show checkmarks, or change colors when users toggle the input.

How do I make custom checkboxes accessible?

Keep the input element in the DOM for keyboard navigation. Associate labels using for and id attributes. Style visible focus states with :focus-visible. Test with screen readers to verify proper announcements.

Can I animate a checkbox with pure CSS?

Yes. Apply transition properties to opacity, transform, or background-color for smooth state changes. Use @keyframes for complex sequences like drawing checkmarks or creating CSS ripple effects on click.

What is accent-color for checkboxes?

The accent-color property sets the fill color for native form controls including checkboxes, radio buttons, and range sliders. One CSS declaration changes the color. Works in Chrome 93+, Firefox 92+, Safari 15.4+.

How do I create a checkbox toggle switch?

Build a pill-shaped track using a wide, rounded ::before element. Create a circular knob with ::after positioned inside. Use transform: translateX() on :checked state to slide the knob across.

Do custom CSS checkboxes work in all browsers?

Pseudo-element techniques work in all modern browsers. The :checked selector has universal support. The accent-color property requires Chrome 93+, Firefox 92+, Safari 15.4+, Edge 93+. Test older versions separately.

How do I style the checkbox label text?

Target the label element directly or use input:checked + label for state-based styling. Common effects include color changes, strikethrough text for completed items, and CSS text animations on selection.

Conclusion

These CSS checkboxes examples give you the foundation to build form controls that match any design system.

Start with the accent-color property for quick wins. Move to pseudo-element techniques when you need full visual control over checkbox design and state changes.

Focus on visual feedback for hover, focus, and disabled states. Users expect clear indicators when interacting with UI components.

Test across Chrome, Firefox, Safari, and Edge. Check the MDN Web Docs and Can I Use database for browser-specific quirks.

Keep accessibility in mind throughout. Proper label association, focus outlines, and WCAG-compliant inclusive design practices ensure your checkboxes work for everyone.

Pick an example above, copy the code, and adapt it to your project.