The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following:

When a radio button is selected, I want the corresponding label to have a background color.

Despite trying various combinations, I have been unable to make it work. Any assistance would be greatly appreciated.

htmlcssradio-button

Answer №1

Make sure to adjust the parent label and place it in the same <td> element for proper CSS functionality to be effective.

.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>

Some CSS adjustments may be needed to ensure a proper layout.

If incorporating Jquery into your code is desired, it can easily be achieved. For example,

VIEW DEMO FIDDLE

Answer №2

To implement the following method, you will need to make some adjustments to your HTML code.

Utilize 

input[type="radio"]:checked+label{ background: pink !important; }
to apply CSS to the label that directly follows a checked radio input.

For more details, please visit: 

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The pop-up dialog on Facebook is limited to the width of the like button, cutting off any excess information

Feel free to check out my blog here. When attempting to click the "LIKE" button, the pop-up appears at the correct height, but the width is limited to the size of the button. Below is the CSS code I am using: .blog_social_media { float: right; b ...

htmlcssfacebookfacebook-like

Guidelines on Implementing a Three-Level Jquery Accordion Menu

Here is a snippet of jQuery code that I am working with: $(document).ready(function(){ $("#accordion2 h3").click(function(){ //slide up all the link lists $("#accordion2 ul ul").slideUp(); //slide down the link list below the h3 clicked - only ...

javascriptjquerycssmenuaccordion

Problem: Challenge in Iterating and Assigning Variables to HTML Table Elements

I am currently working on a project that involves tracking the order statuses of individual shipments from a list of URLs stored in an Excel sheet. The code I have written is capable of looping through the URLs and extracting information from them successf ...

htmlexcelfor-loopvba

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...

javascripthtmlvue.js

Solution to ensure fixed header with correct z-index placement

Everything is functioning correctly, except for the issue that arises when scrolling down to view thumbnails. The left bar covers the thumbnail section, making it impossible to select items. I suspect that the z-index of a div is causing this problem. I ha ...

cssz-index

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

javascriptjqueryhtmlcssgoogle-maps

Issue with JQuery causing maxlength input not to work

Is there a way to use JQuery to set the maxlength attribute for an input[type='text'] while users are typing, so that once the max value is reached, input will stop? This is the code I have been trying: $(document).ready(function(){ $(&apos ...

jqueryhtml

What is the process for adjusting the color of the browser tab?

My chat application is running smoothly, but a client has requested the ability to highlight or make the browser tab blink when they receive a visitor call. This will help them respond promptly to incoming inquiries. Does anyone know how to implement thi ...

jqueryhtmlcss

Incorrect positioning of dropdown menu when using Bootstrap 4 and translate3d() function

Having multiple bootstrap 4.4.1 dropdown menus, each within a column which is functioning correctly except for the position calculation. Example of HTML col: <div class="container"> <div class="row"> <div class="col"> <div ...

htmlcssdrop-down-menubootstrap-4

Remove any unnecessary white space and new lines from the HTML code

Is there a way to remove double whitespaces and new lines from my HTML output without altering the ones within textarea and pre tags using PHP? ...

phphtml

How to deactivate or modify the href attribute of an anchor element using jQuery

My HTML code looks something like this: <div id="StoreLocatorPlaceHolder_ctl07_ctl00_ctl00_pager_ctl00_ctl00_numeric" class="sf_pagerNumeric"> <a href="http://www.domain.com/store-list">1</a> <a href="http://www.domain.com/sto ...

javascriptjqueryhtml

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11

How to make a checkbox list appear bold when checked in AngularJS?

<div class='someClass'> <label ng-repeat="item in itemList"> <input type='checkbox' checklist-model='itemCheckList' checklist-value='item.name'> <span class=& ...

htmlcssangularjs

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

css

Disable the height property in the DOM when implementing the jQueryUI resizable feature

I'm utilizing the flex property to create a responsive layout for my web application. In order to enable resizing of my navigator panel, I have implemented jQuery UI. However, upon triggering the resize event, jQuery UI is adding a hardcoded height t ...

javascriptjqueryhtmlcssjquery-ui

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

javascripthtmlnpm

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

javascripthtmlnode.jsbashsed

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

javascriptjqueryhtmlcss

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax