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?
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/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments