How to Create Custom Radio Button using HTML and CSS ?

Last Updated : 19 Jan, 2022

The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML code and the second section contains the CSS code to create a custom radio button.
HTML Code: In this section, we will create a simple radio button using the <label> and <input> tags.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
 
    <title>
        How to Create Custom Radio
        Button using HTML and CSS?
    </title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        Create Custom Radio Button
        using HTML and CSS
    </h3>
 
    <div>
        <label class="radio">
            <input type="radio"> Button
            <div class="circle"></div>
        </label>
    </div>
</body>
 
</html>

CSS Code: In this section, we will design the radio button using the :after pseudo element and checked attribute.

CSS

<style>
    body {
        text-align: center;
    }
 
    h1 {
        color: green;
    }
 
    div {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: serif;
        font-size: 3em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .radio {
        font-size: 30px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        color: black;
    }
 
    input {
        display: none;
    }
 
    .circle {
        position: relative;
        height: 25px;
        width: 25px;
        border: 5px solid #3CE75B;
        display: inline-block;
        right: 125px;
        border-radius: 50%;
    }
 
    .circle:after {
        content: '';
        height: 10px;
        width: 10px;
        display: block;
        position: absolute;
        background: #3CE75B;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        opacity: 0;
    }
 
    .radio input:checked~.circle:after {
        opacity: 1;
    }
</style>

Complete Code: In this section, we will combine the above two sections (HTML and CSS) code to create a custom radio button.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
 
    <title>
        How to Create Custom Radio
        Button using HTML and CSS?
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: serif;
            font-size: 3em;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        .radio {
            font-size: 30px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            color: black;
        }
 
        input {
            display: none;
        }
 
        .circle {
            position: relative;
            height: 25px;
            width: 25px;
            border: 5px solid #3CE75B;
            display: inline-block;
            right: 125px;
            border-radius: 50%;
        }
 
        .circle:after {
            content: '';
            height: 10px;
            width: 10px;
            display: block;
            position: absolute;
            background: #3CE75B;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            opacity: 0;
        }
 
        .radio input:checked~.circle:after {
            opacity: 1;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        Create Custom Radio Button
        using HTML and CSS
    </h3>
 
    <div>
        <label class="radio">
            <input type="radio"> Button
            <div class="circle"></div>
        </label>
    </div>
</body>
 
</html>