How to create a Radio Button using CSS

Custom Radio Button CSS Code

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