CSS Checkbox and Radio Styling

Enhancing the Look of CSS Checkboxes and Radio Buttons Without JavaScript

If you’re looking to customize the appearance of checkboxes or radio buttons using just CSS, you’re in the right place. This guide will walk you through the process step-by-step, allowing you to create stylish and functional form elements without the need for JavaScript.

Customizing CSS Checkboxes

Let’s start by styling a checkbox. Here’s the HTML structure we’ll use:

<label>
    <input class="checkbox" type="checkbox" name="checkbox-test">
    <span class="checkbox-custom"></span>
    <span class="label">Lorem ipsum dolor</span>
</label>

This markup consists of three key elements:

• .checkbox: This is the actual checkbox input.
• .checkbox-custom: This is the custom element that we’ll style to look like a checkbox.
• .label: This is the label text displayed to the right of the checkbox.

Remember, all these elements must be wrapped in a <label> tag for the functionality to work seamlessly. If you want the checkbox to be checked by default, simply add the checked attribute to the input element.

Adding the CSS

Now, let’s add the CSS styles to bring our custom checkbox to life:

/* Hide the real checkbox */
.checkbox {
    display: none;
}

/* Custom checkbox styling */
.checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

/* Align the custom checkbox and label */
.checkbox-custom,
.label {
    display: inline-block;
    vertical-align: middle;
}

/* Style the custom checkbox when the real checkbox is checked */
.checkbox:checked + .checkbox-custom::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    background: #413548;
    border-radius: 2px;
}

If you’re familiar with basic CSS, this should be straightforward. For beginners, here’s a quick breakdown:

• Hiding the Real Checkbox: We hide the actual checkbox because styling it directly across browsers is challenging. Instead, we use a trick—hide the real checkbox and display a custom-styled box (.checkbox-custom).
• Styling the Custom Checkbox: We position this custom element relative to its container and set its dimensions and border properties.
• Reflecting the Checked State: When the real checkbox is checked, the custom checkbox displays a pseudo-element (::before) that acts as a visual indicator, like a tick or a filled box.

Customizing Radio Buttons

Styling radio buttons follows a similar approach. Here’s the HTML structure:

<label>
    <input class="radio" type="radio" name="radio-test">
    <span class="radio-custom"></span>
    <span class="label">Lorem ipsum dolor sit amet, consectetur</span>
</label>

And the corresponding CSS:

.checkbox,
.radio {
    display: none;
}

.checkbox-custom,
.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
    position: relative;
}

.checkbox-custom,
.radio-custom,
.label {
    display: inline-block;
    vertical-align: middle;
}

.checkbox:checked + .checkbox-custom::before,
.radio:checked + .radio-custom::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    background: #413548;
    border-radius: 2px;
}

.radio-custom,
.radio:checked + .radio-custom::before {
    border-radius: 50%;
}

Final Thoughts

This method is convenient and does not require JavaScript, allowing your forms to behave as expected, even when resetting. The only drawback is the need for “empty” elements like .checkbox-custom and .radio-custom, which serve no semantic purpose in the HTML. However, with a bit of creativity, you can replace these with pseudo-elements, eliminating the need for extra markup.