radio button checked property not working

Question

I'm trying to hover effect on radio's labels as it's working fine but what i want to achieve is:

if i select a radio button the corresponding label should have some background color

I've tried many combinations but it doesn't work for me. Any help would be appreciated.

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*COMBINATIONS I TRIED*/

.radio input[type="radio"]:checked {
    background: pink !important;
}
.radio input[type="radio"]:checked ~ * {
    background: pink !important;
}

<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
            </td>
            <td>
                <label for="payu">
                    <h3 class="checkout_beautify"><b>PAYU MONEY -  (Credit/Debit/NetBanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="icicipg" id="icicipg">
            </td>
            <td>
                <label for="icicipg">ICICI PAYMENT GATEWAY - (Credit/Debit)</label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="citrus" id="citrus">
            </td>
            <td>
                <label for="citrus">
                    <h3 class="checkout_beautify"><b>CITRUS - (Netbanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer">
            </td>
            <td>
                <label for="bank_transfer">
                    <h3><b>DEPOSIT IN BANK</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

I think you should put radio input and label in same td and then need to try with sibling(~) selector — Jay Patel, Nov 27 '15 at 09:23
[link](http://pureweave.com/checkout) but you need to add item first Then see at Payment Method — ADIL BHAT, Nov 27 '15 at 09:24
you can't set parent sibling selector in css. you need to use jquery. it is best way to achieve this output. — Jay Patel, Nov 27 '15 at 09:45

i'm PosSible · Answer 1 · 2015-11-30T07:13:02.280

you have to change label parent and put into same <td> so css work for it,

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*CHANGE FOLLOWING*/
.radio input[type="radio"]:checked + label {
    background: pink;
}
.radio input[type="radio"]:checked + label * {
    background: pink;
}

label { float:left; clear:none; }
input[type=radio] { float:left; clear:none; margin: 2px 0 0 20px; }

<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
            
                <label for="payu">
                    <h3 class="checkout_beautify"><b>PAYU MONEY -  (Credit/Debit/NetBanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="icicipg" id="icicipg">
            
                <label for="icicipg">ICICI PAYMENT GATEWAY - (Credit/Debit)</label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="citrus" id="citrus">
            
                <label for="citrus">
                    <h3 class="checkout_beautify"><b>CITRUS - (Netbanking)</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer">
            
                <label for="bank_transfer">
                    <h3><b>DEPOSIT IN BANK</b></h3>
                </label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

You have to some work with css for proper layout.

if you want to use Jquery in your code then its good, you can easily achieve it. like,

DEMO FIDDLE

score 0 · Answer 2 · edited May 23 '17 at 12:16

You can follow the below approach but you will have to tweak your HTML.

Use input[type="radio"]:checked+label{ background: pink !important; } to write css for the label that immediately follows an input of type radio that is checked.

Reference : https://stackoverflow.com/a/1431788/3008050

.checkout_beautify {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: all 400ms;
    border-radius: 25px;
    text-align: center;
}
.checkout_beautify:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=bank_transfer]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
label[for=icicipg]:hover {
    font-size: 16px;
    line-height: 45px;
    font-weight: bold;
    border: 1px dotted black;
    border-radius: 25px 4px 25px 4px;
    background: #1B1B1B;
    color: #ffffff;
    transition: all 4ms;
    text-align: center;
}
/*COMBINATIONS I TRIED*/

.radio input[type="radio"]:checked {
    background: pink !important;
}
.radio input[type="radio"]:checked ~ * {
    background: pink !important;
}

input[type="radio"]:checked+label{ background: pink !important; }

<table class="radio">
    <tbody>
        <tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payu" id="payu" checked="checked">
             <label for="payu">PAYU MONEY -  (Credit/Debit/NetBanking)</label>
            </td>
        </tr>
<tr class="highlight">
            <td>
                <input type="radio" name="payment_method" value="payy" id="payy">
             <label for="payy">Test</label>
            </td>
        </tr>
    </tbody>
</table>

radio button checked property not working

2 Answers2