How to Create Custom Radio Button using HTML and CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.