Creating a Custom Checkbox and Radio Button with Only CSS

Step 1: HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkbox and Radio Button with CSS</title>
    <meta name="description" content="Learn how to create custom-styled checkboxes and radio buttons using only HTML and CSS. No JavaScript needed! Step-by-step guide with example code.">
    <meta name="keywords" content="custom checkbox CSS, custom radio button CSS, HTML form styling, CSS input styles, checkbox radio UI design">
   
</head>
<body>

<h2>Custom Checkbox and Radio Button</h2>
<p>Click the checkboxes and radio buttons to see the custom design.</p>

<form>
    <!-- Custom Checkbox -->
    <label>
        <input type="checkbox">
        <span class="custom-checkbox"></span>
        Subscribe to newsletter
    </label>

    <label>
        <input type="checkbox">
        <span class="custom-checkbox"></span>
        Accept Terms & Conditions
    </label>

    <!-- Custom Radio Button -->
    <p>Select your gender:</p>
    <label>
        <input type="radio" name="gender">
        <span class="custom-radio"></span>
        Male
    </label>

    <label>
        <input type="radio" name="gender">
        <span class="custom-radio"></span>
        Female
    </label>
</form>

</body>
</html>

Step 2: CSS Code

body {
           font-family: Arial, sans-serif;
           text-align: center;
           background-color: #f4f4f4;
           padding: 20px;
       }

       form {
           background: white;
           padding: 20px;
           border-radius: 10px;
           box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
           display: inline-block;
           text-align: left;
       }

       label {
           font-size: 18px;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 10px;
           margin: 10px 0;
       }

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

       /* Custom Checkbox */
       .custom-checkbox {
           width: 20px;
           height: 20px;
           border: 2px solid #007bff;
           border-radius: 4px;
           display: inline-block;
           position: relative;
       }

       /* Checkbox Checked State */
       input[type="checkbox"]:checked + .custom-checkbox::after {
           content: "✔";
           font-size: 14px;
           color: white;
           text-align: center;
           line-height: 18px;
           position: absolute;
           top: 1px;
           left: 3px;
           width: 100%;
           height: 100%;
           background: #007bff;
           border-radius: 3px;
       }

       /* Custom Radio */
       .custom-radio {
           width: 20px;
           height: 20px;
           border: 2px solid #007bff;
           border-radius: 50%;
           display: inline-block;
           position: relative;
       }

       /* Radio Checked State */
       input[type="radio"]:checked + .custom-radio::after {
           content: "";
           width: 10px;
           height: 10px;
           background: #007bff;
           border-radius: 50%;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }

Explanation

Checkbox and Radio Structure
- The default checkboxes and radio buttons are hidden using display: none;.
- Instead, a span with a .custom-checkbox or .custom-radio class is used as a replacement.
Custom Styling
- The .custom-checkbox is a small square with a blue border.
- When checked, it displays a white ✔ inside a blue background.
- The .custom-radio is a circle with a blue border.
- When selected, a smaller blue dot appears inside.
CSS Effects
- The ::after pseudo-element is used to style the checked state dynamically.
- position: absolute; ensures the checkmark or radio dot is perfectly centered.

Creating a Custom Checkbox and Radio Button with Only CSS

Step 1: HTML Code

Step 2: CSS Code

Explanation

Leave a Reply Cancel reply