How to create a Radio Button using CSS

Collection of radio buttons describing a set of related options. If user-select should only select 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. Attribute represents a radio button. The control associated with this radio button that allows users to select the radio group.

Radio Group

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

Similarly, The value attribute defines the unique value associated with each radio button. The value is not shown to the user. Because the value which is sent to the server on “submit”, So it will identify the selected radio button.

Here, CSS hides the default radio buttons with the help of CSS opacity CSS property  shows 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;}