Tips for designing a chosen radio button with interactive space:

After stumbling upon this CSS query regarding styling selected radio buttons labels from Stack Overflow and also checking out this discussion on UX Exchange, I attempted to apply both techniques but couldn't quite get it right. It seems that a parent selector is missing in this scenario, so I'm seeking some guidance from the experts here.

Below is the specific code snippet I've been working with, although I welcome generic examples as well:

<label for="ship-sfc-CNQM" class="checkboxLabel back">
    <div class="shippingcontainer">
        <input type="radio" name="shipping" value="sfc_CNQM" checked="checked" id="ship-sfc-CNQM">
        <div class="back sfc_logos" id="CNQM" title="China Post"></div><div class="back sfcdaterange"><span class="sfcdateprefixlong">Estimated delivery between </span><span class="sfcdateprefixmed">Est. between </span><span class="sfcday">Wednesday </span><span class="sfclongmonth">November </span><span class="sfcshortmonth">Nov </span><span class="sfcdate">11</span><span class="sfcordinal">th</span><span class="sfclongseparator"> and </span><span class="sfcshortseparator"> - </span><span class="sfcday">Tuesday </span><span class="sfclongmonth">December </span><span class="sfcshortmonth">Dec </span><span class="sfcdate">1</span><span class="sfcordinal">st</span></div>
        <div class="important forward">$0.00</div>
    </div>
</label>

My main question is: How can I style the .checkboxLabel element when its child radio button is checked?

css

Answer №1

To achieve the desired effect using only HTML and CSS, you can make some adjustments to your HTML structure. Here is an example snippet:

HTML

<label for="ship-sfc-CNQM" class="radio">
  <input type="radio" name="shipping" value="sfc_CNQM" id="ship-sfc-CNQM" />
  <div class="radioStyle"></div>
  <span>Text goes here</span>
</label>

CSS

.radio input { display: none; }

.radio .radioStyle  { 
  display: inline-block;
  width:20px; height:20px;
  background: grey; }

.radio input:checked + .radioStyle { background: green; }

.radio span { display: inline-block; }

In this setup, the :checked CSS selector is used to style the label when it is selected.

You can see a live demo of this implementation in action here: https://jsfiddle.net/w7tem94t/

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

Controlling the Alignment of HTML Div Elements

I'm struggling to align some of these divs, especially centering them. I want the page to closely resemble this image: Here are the specific requirements: 1) The header text should be centered vertically and placed in a separate div with a black back ...

csshtmlalignmentvertical-alignment

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

javascriptjquerycss

What is the method for creating a variable that is dynamic in nature?

I have encountered a small issue that I am struggling to resolve. There is one div that should execute a jQuery code on onTouchEnd, and it does so perfectly. The function sends the ID of the specific div. <div id="tapme1" class="subject hold" onTouchE ...

jqueryhtmlcss

Tips for creating a consistent vertical divider height between columns in bootstrap

I've encountered similar queries before, but the responses provided were not quite what I needed. While one answer came close to my desired outcome, it led to other complications that I am now facing. My main challenge is maintaining consistent vertic ...

htmlcssbootstrap-4

Creating a Bootstrap 4 layout with a centered body and maximum width

I want my Bootstrap 4 webpage to have a maximum width of 960px, including the top navbar. I tried enclosing everything within a body div with a set max-width, but it ended up being left-aligned. How can I center the body div with whitespace around it when ...

htmlcsswidthbootstrap-4

Struggling to get the video in the background to function properly with the controls

My website is built on Wordpress and includes the Easywpvideo plugin, which unfortunately doesn't have any support available. We are looking to have a video playing in the background, with the ability for users to stop and start it as they please. I ...

htmlcss

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to Delete the Bottom Border on Selected Tabs in MUI Using React

I am attempting to customize the appearance of MUI Tabs to achieve a design similar to the image below: https://i.sstatic.net/tBS1K.png I have created a sample code example in a codesandbox environment. You can view it here: Codesandbox Example. In this e ...

htmlcssreactjsmaterial-uitabs

Is there a way to set an image as the background for several components in ReactJS?

I am trying to add an image as a background where various components like video, login, and bottom component will be placed on top of it. Can anyone help me with the correct code structure for achieving this in React? I am quite new to React development. ...

htmlcssreactjsbootstrap-4react-hooks

Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard. Initially, everything was functioning co ...

htmlcss

Tips for avoiding the selected color from changing when refreshing the browser

Excuse my English proficiency... I have implemented a feature on my website that allows users to change the colors of the site based on their selection, and it is working well. However, the issue I am facing is that when the browser window is refreshed, ...

javascriptjqueryhtmlcssbootstrap-4

Maintain consistent width of a page across different mobile devices

Currently, the content on my page does not have any viewport settings. It is simply using a 25% left and right margin for the entire content area. The issue arises when accessing the page from a mobile device, as the width adjusts to match the screen size ...

htmlcssresponsive-designviewport

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

javascriptjqueryhtmlcss

Utilizing the onclick colour changer feature to modify the text color of a paragraph, specifically targeting the parent paragraph

I am facing an issue with a 3 column document where the footer of each column has a color changer that is changing the text color of all paragraphs on the page instead of just the parent div. Here is the code snippet: $('a.text_blue').click(func ...

jqueryhtmlcss

SVG not displaying correctly in Firefox

For some reason, my CSS-animated SVG is not showing up in Mozilla Firefox 58, although it works fine in Chrome. https://i.sstatic.net/rFD8z.png If you want to take a look at the code, here is the link to the Codepen page: https://codepen.io/ninivert/pen/ ...

cssfirefoxsvg

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

javascriptcssreactjsstyled-components

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout. The issue I am facing is that the pictures and buttons get cut off on the screen due to ...

cssreactjsflexboxmaterial-ui