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

Question

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>
    </div>
</label>

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

With CSS...you can't. You needJS or an alternative HTML structure. — Paulie_D, Nov 01 '15 at 21:01
Is there an alternative HTML structure that achieves both goals? (ie. style the label, and have the label include whitespace) — bcsteeve, Nov 01 '15 at 21:05

CaribouCode · Accepted Answer · 2015-11-01T21:14:39.940

0

If you restructure your HTML slightly you can do this with pure HTML and CSS. Something like this as a 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>Here is the text</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; }

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

Working fiddle: https://jsfiddle.net/w7tem94t/

edited Nov 01 '15 at 21:14

answered Nov 01 '15 at 21:01

CaribouCode

13,998
28
102
174

Doesn't that bring me back to the "AND include space as clickable?" part of the question? ie. the UX link I posted. The point is to make the whitespace of an option part of the selection box, which is why the label should go on the outside. – bcsteeve Nov 01 '15 at 21:03
So just wrap the label around everything as you originally did. The CSS and structure still applies. I'll update my answer – CaribouCode Nov 01 '15 at 21:13
Alright, I'm confused because that's what I thought I already had :) Yours works and mine didn't, so obviously not. Thanks for your help. – bcsteeve Nov 01 '15 at 21:23
It's likely down to the CSS you applied to yours then. You can't apply CSS to parent elements. In this situation you must use `checked` and `+` to achieve the goal. – CaribouCode Nov 01 '15 at 21:25

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

1 Answers1