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

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:

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/


    CSS Howto..

    How should a graphic designer learn web design? [closed]

    How to use CSS to surround a number with a circle?

    How to draw a circle css

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    How to find the highest z-index using jQuery

    How can I get the name of a page via Laravel Blade

    How to make the content of a span wrap onto the next line in an embedded

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How do you square off only one corner of a div to be transparent in CSS?

    CSS breadcrumb - how to make radius small

    How to get rid of the bottom shadow in label of the css tabs

    How do I change the css overflow property of the HTML with javascript

    How do I make everything on this page centered and fully responsive for all browsers?

    how can I make my navbar scroll smoothly to the top on page click

    How to strip CSS from a button in a jQuery Mobile dialog

    CSS: How to position divs 2 by 2

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How to center something I appended with js and also replace it

    How to Tie Events to CSS

    How to create two column in form using css

    Using HTML5 and CSS3 How can I keep two elements inline in a responsive container whilst maintaining the same margins?

    using overflow hidden, show a partial element when the children are too large for container

    How to add a gradient/filter in the image in CSS

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How to prevent rendering css when loading stylesheet from local storage?

    how to make a title div center aligned

    How to enforce a min-width for a page (css)

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    Opacity on hover of parent is being transfered to submenu; how to prevent this using CSS

    Integration of CSS, Javascript and html ,,,howto