Custom Checkbox & Radio Button With Pure CSS (Simple Example)

Welcome to a tutorial and example of how to create a custom checkbox and radio button using pure CSS. The Stone Age of the Internet is long over, but it is still impossible to create a custom checkbox or radio button using “direct CSS only”. So here it is, let us walk through a simple example in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/custom-checkbox-radio-button-with-pure-css/” title=”Custom Checkbox & Radio Button With Pure CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

THE DEMO

 

THE HTML

<!-- (A) CHECKBOX -->
<div class="cbox">
  <input type="checkbox" name="checkA" id="checkA">
  <label for="checkA">Checkbox</label>
</div>

<!-- (B) RADIO BUTTONS -->
<div class="cbox">
  <input type="radio" name="radioB" id="radioB1">
  <label for="radioB1">Radio</label>
</div>
<div class="cbox">
  <input type="radio" name="radioB" id="radioB2">
  <label for="radioB2">Radio</label>
</div>
 
<!-- (C) DISABLED CHECKBOX & RADIO BUTTON -->
<div class="cbox">
  <input type="checkbox" name="checkC" id="checkC" disabled>
  <label for="checkC">Disabled Checkbox</label>
</div>
<div class="cbox">
  <input type="radio" name="radioD" id="radioD2" disabled>
  <label for="radioD2">Disabled Radio</label>
</div>

This should be straightforward:

• Create the <input type="checkbox"> or <input type="radio"> as usual.
• Attach a <label> to the checkbox or radio button.
• Finally, wrap both the label and checkbox/radio in a <div class="cbox">.

 

 

THE CSS

/* (A) HIDE ORIGINAL CHECKBOX/RADIO */
.cbox input { display: none; }

/* (B) ICON TO SHOW WHEN CHECKED */
.cbox input:checked ~ label::before { content: "\2605"; }

/* (C) CUSTOM CHECKBOX SQUARE */
.cbox label::before {
  display: inline-block;
  content: "\00a0"; /* Blank space */
  width: 25px;
  margin-right: 5px;
  text-align: center;
  background: #f2f2f2;
}

/* (D) MORE COSMETICS */
.cbox {
  font-size: 18px;
  line-height: 20px;
  margin: 10px;
}
.cbox label { cursor: pointer; }
.cbox label:hover::before { background: #ddd; }

/* (E) DISABLED CHECKBOXS & RADIO BUTTONS */
.cbox input:disabled ~ label { color: #aaa; }
.cbox input:disabled ~ label::before { background: #ccc; }

This may seem pretty confusing at first, but let us walk through section-by-section:

1. Since checkboxes and radio buttons cannot be directly styled, we start by hiding them… Clicking on the label will still work anyway.
2. The whole idea is to then use label::before to draw our custom checkbox. In English, this line means “show a star symbol when the checkbox/radio is checked”. Will leave a link below to an entire list of available HTML symbols.
3. Draw our custom square checkbox.
4. Just a couple more cosmetics. The font size, shows a pointer on mouse hover, and changes the background color.
5. Color changes on a disabled checkbox/radio.

 

 

 

LINKS & REFERENCES

• Character Entities – Github
• HTML Symbols, Entities and Codes — Toptal Designers
• Pure CSS: Accessible Checkboxes and Radios Buttons -Aditya Bhandari
• Example on CodePen – Pure HTML CSS Custom Radio Checkbox

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET