Radio button is a part of HTML forms
Radio button is used to select one of many options
Step 1: Add HTML
<div class="custom-radio">
<div class="radio1">
<input type="radio" id="custom-radio1" value="None" name="radio" />
<label for="custom-radio1">Radio Button 1</label>
</div>
<div class="radio2">
<input type="radio" id="custom-radio2" value="None" name="radio" />
<label for="custom-radio2">Radio Button 2</label>
</div>
</div>Step 2: Add CSS
.custom-radio input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 32px;
height: 32px;
border-radius: 3px;
border:#008264 3px solid;
background:#fff;
margin: 0px;
vertical-align: middle;
}
.custom-radio input[type=radio] + label {
display: inline-block;
padding-left: 10px;
font-size:16px;
line-height: 20px;
vertical-align:middle;
}
.custom-radio input[type=radio]:checked {
border: 4px solid #008264;
background-color: #008264;
}
.custom-radio input[type=radio]:after {
content: "";
opacity: 0;
visibility: hidden;
display: block;
left: 4px;
top: 4px;
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #008264;
transition: opacity 0.3s ease-in-out;
}
.custom-radio input[type=radio]:checked:after {
opacity: 1;
visibility: visible;
background-color: #fff;
}
.custom-radio .radio1 {
margin-bottom: 16px;
}Checkout Live demo Custom Radio Button
