How to style a selected radio button AND include space as clickable?

Tags: css

Problem :

So I was reading CSS - How to Style a Selected Radio Buttons Label? here on SO and also this Q/A over on UX

I tried implementing both concepts and I can't seem to figure out how to do it, since a parent selector doesn't seem to exist. I'm sure one of you genii can help me.

Here's specifically the code I'm working with, but generic examples are fine:

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

How do I style .checkboxLabel when its child radio button is checked?

Solution :

If you restructure your HTML slightly you can do this with pure HTML and CSS. Something like this as a snippet:


<label for="ship-sfc-CNQM" class="radio">
  <input type="radio" name="shipping" value="sfc_CNQM" id="ship-sfc-CNQM" />
  <div class="radioStyle"></div>
  <span>Here is the text</span>


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

Here, you're using the :checked CSS selector to apply a rule to the following label field when it's selected.

Working fiddle:

    CSS Howto..

    How to resize the images to have the same height in group while keeping aspect ratio?

    CSS Grid Layout Module Level 1 - How long does it usually take from candidate recommendation to final spec?

    How to create a global settings file in react css modules

    How to force an update of a css selector inside context?

    How to create tabs using Javascript and Jquery

    How to make a CSS composite scalable

    How to get element by its partial class name CSS

    Fuelux, how to fix the width of a repeater column

    CSS how to make icons look like they are inside the backround

    How should i improve my jQuery click funciton?

    How To Vertically Center Text Over Responsive Video

    How to make a circular button out of a PNG image?

    On Edge Browser, how to change input placeholder text color using CSS?

    How to put border bottom only on last-child of dropdown menu

    How do I keep my elements on the same horizontal line?

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How do I design my CSS with ASP.NET MVC?

    How do I get Jquery to toggle display

    how to read value of style[“display”] property of webcontrol

    How i can optimize Performance in asp.NET MVC based web application

    CSS: How to get thumbnails into a horizontal line?

    How should I organize the contents of my CSS file(s)?

    How to make a sliding dashboard similar to [closed]

    Table border not showing up

    CSS - How to remove white

    How to implement Read more / Read less in pure CSS

    jquery style sheet switcher - how to effect only theme css?

    How do I set the table row heights to minimum except last row?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?