라디오버튼 커스텀
<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;
}
/* Checked */
.form_radio_btn input[type=radio]:checked + label {
background: #184DA0;
color: #fff;
}
/* Hover */
.form_radio_btn label:hover {
color: #666;
}
/* Disabled */
.form_radio_btn input[type=radio] + label {
background: #F9FAFC;
color: #666;
}
Author And Source
이 문제에 관하여(라디오버튼 커스텀), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@thwjd9393/라디오버튼-커스텀저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)