"> "> ">
https://lionbum.tistory.com/93
<!-- input과 label의 id값을 사용해 연동 -->
<div class="paymentList">
<input type="radio" id="chk1" name="chkPayment" value="1" checked="checked">
<label for="chk1">카드결제</label>
<input type="radio" id="chk2" name="chkPayment" value="2">
<label for="chk2">실시간계좌이체</label>
<input type="radio" id="chk3" name="chkPayment" value="3">
<label for="chk3">무통장입금</label>
<input type="radio" id="chk4" name="chkPayment" value="4">
<label for="chk4">휴대폰결제</label>
<input type="radio" id="chk5" name="chkPayment" value="5">
<label for="chk5">카카오페이</label>
<input type="radio" id="chk6" name="chkPayment" value="6">
<label for="chk6">네이버페이</label>
</div>
/* 인접 선택자로 선택된 radio의 label만 변경*/
main div.orderFrame .payment .paymentList input[type=radio] {
display: none;
}
main div.orderFrame .payment .paymentList input[type=radio]+label {
display: inline-block;
cursor: pointer;
width: 100px;
height: 50px;
font-size:14px;
font-weight:bold;
text-align: center;
line-height: 50px;
border: 1px solid #333;
background-color: #f9f9f9;
color: #333;
margin-top: 5px;
}
main div.orderFrame .payment .paymentList input[type=radio]:checked+label{
background-color: #333;
color: #fff;
}