"> "> ">

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;
}