Article Categories

Selected Reading

How to create custom checkboxes and radio buttons with CSS?

CSS Web Development Front End Technology

The default checkboxes and radio buttons can be easily customized with CSS to match your website's design. You can modify their appearance, colors, and behavior for different states like selected, hovered, and focused.

Syntax

/* Hide default input */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
}

/* Create custom styling */
.custom-input {
    /* Custom styles here */
}

Custom Checkbox

To create a custom checkbox, we hide the default input and create a custom visual using CSS pseudo-elements.

Example: Custom Checkbox

<!DOCTYPE html>
<html>
<head>
<style>
    .checkboxContainer {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 18px;
        user-select: none;
    }

    .checkboxContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkboxMarked {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        border: 2px solid #ddd;
        border-radius: 4px;
    }

    .checkboxContainer:hover input ~ .checkboxMarked {
        background-color: #f0f8ff;
        border-color: #007bff;
    }

    .checkboxContainer input:checked ~ .checkboxMarked {
        background-color: #007bff;
        border-color: #007bff;
    }

    .checkboxMarked:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkboxContainer input:checked ~ .checkboxMarked:after {
        display: block;
    }

    .checkboxContainer .checkboxMarked:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }
</style>
</head>
<body>
    <h3>Select Items:</h3>
    <label class="checkboxContainer">Rice
        <input type="checkbox" checked="checked">
        <span class="checkboxMarked"></span>
    </label>
    <label class="checkboxContainer">Flour
        <input type="checkbox">
        <span class="checkboxMarked"></span>
    </label>
    <label class="checkboxContainer">Sugar
        <input type="checkbox">
        <span class="checkboxMarked"></span>
    </label>
</body>
</html>

Three custom checkboxes appear with "Rice" pre-selected. The checkboxes have a blue color scheme with checkmarks and hover effects. When clicked, they show a white checkmark on a blue background.

Custom Radio Button

Radio buttons can be styled by removing the default appearance and applying custom circular designs with different states.

Example: Custom Radio Button

<!DOCTYPE html>
<html>
<head>
<style>
    .radio-group {
        margin: 20px 0;
    }

    .radio-group label {
        display: inline-block;
        margin: 0 15px 10px 0;
        font-size: 16px;
        cursor: pointer;
        position: relative;
        padding-left: 30px;
    }

    input[type="radio"] {
        appearance: none;
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
        border: 2px solid #007bff;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
    }

    input[type="radio"]:checked {
        background-color: #007bff;
        border-color: #007bff;
    }

    input[type="radio"]:checked:after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
    }

    input[type="radio"]:hover {
        border-color: #0056b3;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }
</style>
</head>
<body>
    <h3>Select Gender:</h3>
    <div class="radio-group">
        <label>
            <input type="radio" name="gender" value="male">
            Male
        </label>
        <label>
            <input type="radio" name="gender" value="female">
            Female
        </label>
        <label>
            <input type="radio" name="gender" value="other">
            Other
        </label>
    </div>
</body>
</html>

Three custom radio buttons appear for gender selection. They have a blue circular design with white inner dots when selected. Hovering over them shows a subtle blue shadow effect.

Key Properties

Property	Description
`appearance: none`	Removes default browser styling
`opacity: 0`	Hides original input while keeping functionality
`:checked`	Pseudo-class for selected state
`:hover`	Pseudo-class for hover effects
`::after`	Creates custom checkmarks or indicators

Conclusion

Custom checkboxes and radio buttons enhance user experience by providing consistent styling across browsers. Use the appearance: none property to remove default styles, then create custom designs using pseudo-elements and CSS selectors for different states.

AmitDiwan

Updated on: 2026-03-15T14:14:25+05:30

419 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next