<div class="row radio">
<input id="sex-male" type="radio" name="sex" value="male" checked="checked" />
<label for="sex-male">Male</label>
</div>
<div class="row radio">
<input id="sex-female" type="radio" name="sex" value="female" />
<label for="sex-female">Female</label>
</div>
<div class="row radio">
<input id="sex-other" type="radio" name="sex" value="others" />
<label for="sex-other">Other</label>
</div>
label {
font-size: 20px;
line-height: 26px;
}
.radio input[type="radio"] + label {
color: grey;
position: relative;
}
.radio input[type="radio"] + label::before {
/* Outer Circle of radio button */
border: 1px solid grey;
content: ' ';
display: inline-block;
margin-right: 5px;
width: 17px;
height: 17px;
border-radius: 50%;
transition: border 0.15s ease-in-out;
}
.radio input[type="radio"] + label::after {
/* Inner Circle of radio button */
border: 0px solid orange;
content: ' ';
background: transparent;
display: inline-block;
margin-right: 5px;
width: 11px;
height: 11px;
border-radius: 50%;
position: absolute;
left: 4px;
top: 3px;
transition: border 0.15s ease-in-out;
}
input[type="radio"] {
display: none;
}
/* When button is active */
.radio input[type="radio"]:checked + label::after {
background: orange;
}
.radio input[type="radio"]:checked + label::before {
border-color: orange;
}
.radio input[type="radio"]:checked + label {
color: orange;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.