How to Create Custom Radio Button using HTML and CSS ?

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>
Output:  
 
rkbhola5
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS