<div class="mb-3">
<label for="userSex" class="form-label">성별</label>
<div class="form_toggle row-vh d-flex flex-row justify-content-between" >
<div class="form_radio_btn radio_male">
<input id="radio-1" type="radio" name="userSex" value="male" checked>
<label for="radio-1">남자</label>
</div>
<div class="form_radio_btn">
<input id="radio-2" type="radio" name="userSex" value="female">
<label for="radio-2">여자</label>
</div>
</div>
</div>
.form_radio_btn {
width: 47%;
height : 45px;
border: 1px solid #EAE7E7;
border-radius: 10px;
}
.form_radio_btn input[type=radio] {
display: none;
}
.form_radio_btn label {
display: block;
border-radius: 10px;
margin: 0 auto;
text-align: center;
height: -webkit-fill-available;
line-height: 45px;
}
.form_radio_btn input[type=radio]:checked + label {
background: #184DA0;
color: #fff;
}
.form_radio_btn label:hover {
color: #666;
}
.form_radio_btn input[type=radio] + label {
background: #F9FAFC;
color: #666;
}