CODEWITHSUNDEEP
htmlcssradio-button
ADIL BHAT
ADIL BHAT

Reputation: 11

radio button checked property not working

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>

Upvotes: 1

Views: 2401

Answers (2)

i&#39;m PosSible
i&#39;m PosSible

Reputation: 1393

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

Upvotes: 1

karan3112
karan3112

Reputation: 1867

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>

Upvotes: 0

Related Questions