<div class="radio">
<input type="radio" name="radio" class="radio-input" id="radio-01">
<label for="radio-01">ラジオボタン01</label><br>
<input type="radio" name="radio" class="radio-input" id="radio-02">
<label for="radio-02">ラジオボタン02</label><br>
<input type="radio" name="radio" class="radio-input" id="radio-03">
<label for="radio-03">ラジオボタン03</label>
</div>.radio-input{
display: none;
}
.radio-input + label{
padding-left: 20px;
position:relative;
margin-right: 20px;
}
.radio-input + label::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 50%;
}
.radio-input:checked + label{
color: #d01137;
}
.radio-input:checked + label::after{
content: "";
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 11px;
height: 11px;
background: #d01137;
border-radius: 50%;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.