How to create a Radio Button using CSS

This article helps to explain ” How to create a Custom Radio Button using CSS ?”

Radio Group

Radio groups are a collection of radio buttons describing a set of related options. user-select Only one radio button at the same time in a group.

Syntax

<input type=” radio” name=” radio”>

We are using an input element to create a radio button. The input element, having the “radio” value in its type attribute, represents a radio button. The control associated with this radio button that allows users to select the radio group.

The radio group must share the same value of the name attribute. the main concept is if the user selected any radio button in that group then if there is any other selected radio button should automatically deselect the radio button in the same group. We can create many radio groups on a page as we want.

The value attribute defines the unique value associated with each radio button. The value is not shown to the user but is the value that is sent to the server on “submit” to identify which radio button that was selected.

CSS hides the default radio buttons with the help of CSS opacity property and show our custom radio buttons in place of them.

HTML

<div class="col rbutton">
<div class="bg-white mb-4">
<label class="cc-Radio Radio_control">
1st Radio
<input type="radio" name="radio" checked />
<div class="Radio_indicator">
</div>

</label>
<label class="cc-Radio Radio_control">
1st Radio
<input type="radio" name="radio" checked />
<div class="Radio_indicator">
</div>
</label>
</div>	
</div>

CSS

.Radio_indicator {
position: absolute;
top: 5px;
left: 0;
height: 15px;
width: 15px;
border: 1px solid #ffd800;
}

.cc-Radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 15px;
cursor: pointer;
font-size: 18px;
}

.Radio_control .Radio_indicator {
border-radius: 50%;
}

.cc-Radio input {
position: absolute;
z-index: -1;
opacity: 0;
}

.cc-Radio input:checked ~ .Radio_indicator {
background: #ffd800;
}
.rbutton label{background:none;color:#000;}