Custom Checkbox & Radio Buttons in CSS

1. HTML Structure

Wrap your input with a label and add a span for the custom UI:

    
    
    Subscribe to newsletter

            

2. Custom Checkbox CSS

Hide the native checkbox and style the .checkmark:

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    gap: 0.5rem;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background-color: #e2e8f0;
    border-radius: 4px;
    border: 2px solid #94a3b8;
    position: relative;
    transition: background 0.2s;
}

.custom-checkbox input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    background: transparent;
}
.custom-checkbox input:checked + .checkmark {
    background-color: #2563eb;
    border-color: #2563eb;
}
            

3. Custom Radio Buttons

The structure is similar—just use a circle:

    
    
    Male

            

.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.custom-radio input {
    display: none;
}

.custom-radio .radiomark {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #f1f5f9;
    position: relative;
}

.custom-radio input:checked + .radiomark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
}
            

4. Accessibility Tips

• Wrap <input> in a <label> for clickable access.
• Use tabindex or ARIA roles if doing complex customization.
• Never remove the actual input—just hide it visually.

Conclusion

Custom checkboxes and radio buttons allow for consistent styling across browsers while keeping the native functionality intact. Use them carefully with proper accessibility support.