Styling Radio Buttons based on "Checked" Status

Is there a way to apply a CSS style to the image within this Radio button when the checked attribute is present?

<div id="edit-attributes-24-42-wrapper" class="form-item">
  <label for="edit-attributes-24-42" class="option">
    <input type="radio" class="form-radio" checked="checked" value="42" name="attributes[24]" id="edit-attributes-24-42">
    <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
    <div class="radio_image_text">
      Radio Button text, hidden by display:none in CSS
    </div>    
  </label>
</div>

My goal is to add a CSS class "selected" to the 

<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
section of the code.

cssradio-button

Answer №1

While CSS alone cannot add a class, you can still target a specific element using the following code:

input:checked + img {
    /* your style here */
}

This will apply the same styling as your desired class to the selected element.

Check out this jsFiddle demonstration

Answer №2

When the input.form-radio is checked, the adjacent image will have a border of 5px solid.

input.form-radio:checked + img {
    border:5px solid;
}

Check it out on Fiddle

Here is a sample HTML snippet:

<div id="edit-attributes-24-42-wrapper" class="form-item">
    <label for="edit-attributes-24-42" class="option">
        <input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
        <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
        <div class="radio_image_text">Radio Button text, hidden by display:none in CSS</div>

        <input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
        <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
        <div class="radio_image_text">Radio Button2 text, hidden by display:none in CSS</div>

    </label>
</div>

Answer №3

Typically, every browser displays radio buttons in its unique way.

If you want to customize the appearance of radio buttons, you can check out the resources provided at the following link:

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

Tips and tricks for seamlessly aligning a specific section of your webpage to ensure it scrolls smoothly into view

My codes are not being centered when I use smooth scrolling on a specific section of a Bootstrap carousel template. Is there an easier way to achieve this? The explanation in a post from six years ago didn't help much. Here are my codes and screenshot ...

javascripthtmlcssbootstrap-4

Adjustments to make for custom span and gutter width in Bootstrap's values

Looking to design a fixed layout with Bootstrap? Want to set span3 to 278px and gutter width to 12px for a total width of around 1142px? I tried the Customize tool on the Bootstrap site, but didn't get the desired result. Any advice on the correct val ...

csstwitter-bootstrapless

How to vertically center text with button label in Bootstrap 4

I have a simple objective: I want to align a line of text to the left and a button to the right, with the text vertically aligned to the button's label. I've tried adjusting padding and margins without success. I feel like there must be an easy s ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to update the color of an fa icon when an error message is displayed using PHP

I am facing an issue with my form where error messages are displayed on certain input fields. The error messages show up correctly, but I want to change the color of the "fa" icon in the field when its corresponding error message appears. My goal is to ma ...

phpcssformsechofont-awesome

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph. When it comes to styling the node, I am using the property width: label in the code snippet below: const cy = cytoscape({ container: document.getElementById('cyGraph&apo ...

javascriptcsstypescriptcytoscape.js

Utilizing LazySizes for Image Lazy Loading while Ensuring that the Image Space is Retained during the Loading Process

I am currently utilizing LazySizes for lazy loading images on my website. While I am working with Bootstrap as the foundation for my HTML and CSS, I am encountering an issue. I am struggling to ensure that the space around the image is maintained while the ...

csslazy-loading

Create a stunning Bootstrap carousel that showcases images perfectly centered and automatically resized in both width and height to fit the Div container

Currently, I am working on integrating a Bootstrap carousel that features centred and auto-resized images. In the JSFiddle example provided (https://jsfiddle.net/koba1/mb94dgzu/6/), you will notice that the first image (a vertical one) stretches to fill th ...

htmlcssbootstrap-4

What is the best way to center text within a button when there is also an image present?

I'm trying to create a button with an image and some text, but I can't seem to get it aligned properly. Here's the code I have so far: <button><img src="https://www.google.com/s2/favicons?domain=google.com">&nbsp;Go ...

htmlcssbuttonvertical-alignmenttext-alignment

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

Using Selenium to verify if text appears in bold format or not

<div class="searchCenter largeFont"> <b> 1 </b> <a href="search/?p=2&q=move&mt=1"> 2 </a> <a href="search/?p=3&q=move&mt=1"> 3 </a> <a href="search/?p=4&q=move&mt=1"> 4 </a> < ...

cssselenium

Using a global CSS file in Angular can lead to large module bundles being emitted by Webpack

In our Angular application generated with angular-cli, we are utilizing various global styles and imports defined in the styles.scss file (which begins with /* You can add global styles to this file, and also import other style files */ if that sounds fami ...

cssangularwebpacksass

Prevent the display of cascading div elements by using JavaScript and jQuery scripting

My webpage performs a simple check to verify if Javascript and cookies are enabled on the client's browser. If they are enabled, the script displays the content inside div id="conteudo" and hides the warning message inside div id="aviso". If not, the ...

javascriptjqueryhtmlcss

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax

The navigation bar expands in height as the media width changes

I have a rather straightforward navbar: <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> @Html.ActionLink("Contact ...

htmlcsstwitter-bootstrap

How can JavaScript be used to dynamically display submitted HTML form values on the same page, as well as how to perform calculations on the form data?

Currently, I am working on creating a form for collecting passenger information at an airport. The form includes fields for first name, last name, passenger weight, and cargo weight. Upon submitting the form, I aim to display the entered information along ...

javascripthtmlcss

Currently, I am attempting to figure out the Xpath or CSS necessary to locate and interact with an Add

Struggling to pinpoint the Add button on our website that I'm currently automating using Python and Webdriver. The Xpath provided by Selenium IDE is as follows: adminAdd_button = driver.find_element_by_xpath("//button[@type='button'])[33]") ...

pythoncssxpathselenium-webdriverwebdriver

What is the best way to ensure that the text input spans the entire width of the div in Bootstrap 4?

I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the f ...

csshtmlinputbootstrap-4

Triangle shape with transparent background on top of iframe or div

Currently facing an issue where I need to add an iframe containing maps to my page. However, I also need one (or two) triangles placed over this iframe with a transparent background. I attempted this solution, but unfortunately, it did not work as expect ...

javascripthtmlcss

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

How can I align a div in a vertical manner if it is displayed as a circle?

This is the creation I have come up with: This is the design I am aiming for: Below is the code I have written: <div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div> Here is the corresponding CSS: ...

htmlcsscss-positionvertical-alignment