Form CSS: Styling a radio box's parent (label) based on checked / unchecked status

Question

So i have a form. Most of the questions asked in the forms are using Radio inputs.

i'm going with

<label>Option1
    <input type="radio">
</label>
<label>Option2
    <input type="radio">
</label>

I'm styling the Labels using :hover, giving it a subtle background change to indicate which option you are highlighting. However, i want the label for the selected option to have a different colored background. Is there any way of doing this using CSS, or do I have to go with jQuery? What i want to do is declare a style for the parent (label) of the checked input box.

Upon further brainstorming i'd like to change the parent fieldset's bkg-color upon having all required fields filled in. I'm starting to feel jQuery is the way to go here..?

[Notes:] Using HTML5 / CSS3 / jQuery. Only has to be compatible with Chrome or Firefox. This is something that is to run locally on a laptop, so as long as it runs fine on that computer I don't have to worry about compatibility on older browsers etc. :)

Edit: Solution posted by Nick Carver. A few additions to get this to work properly with radio buttons. Posting for completeness:

$('input[type="radio"]').change(function() {
    var tmp=$(this).attr('name');
    $('input[name="'+tmp+'"]').parent("label").removeClass("checked");
    $(this).parent("label").toggleClass("checked", this.selected);      
});

$('input[type="checkbox"]').change(function() {
    $(this).parent("label").toggleClass("checked", this.selected);
});

score 2 · Accepted Answer · answered Oct 30 '10 at 16:02

2

There isn't a way with pure CSS, since you're styling a parent and not a child. If you did it in jQuery you'd do something like:

$("fieldset :radio").change(function() {
  $(this).closest("label").toggleClass("onClass", this.checked);
});

The overall <fieldset> styling would depend on your markup, if you have some sort of container each radio set is in you could check if none of those had a :checked element within...if they all do, then use the same .toggleClass() approach to set that "all checked" class on or off.

answered Oct 30 '10 at 16:02

Nick Craver

623,446
136
1,297
1,155

1

This worked perfectly on checkboxes, but didn't quite work as expected on radio groups. I had to make an extra function targetting radio groups. Code follows: – Fade Oct 30 '10 at 18:04
@Fade - Can you post the markup that includes the whole container? As in, are all these labels in a `
` or something, each group?
– Nick Craver Oct 30 '10 at 18:06
http://dev.ute.no/TU-bruker/form.html (don't mind the layout / color choice. Need to get the cogs working before i continue :)) – Fade Oct 30 '10 at 19:01

score 1 · Answer 2 · answered Oct 30 '10 at 16:02

Can't do it with vanilla CSS. You'd need to use jQuery to add some onclick behavior to the radio boxes that add/remove a class from the label for selected. Then you could add the :hover class to your selector. For best results I think that you'll need to make sure your labels are set to display:inline-block; for best results.

score 1 · Answer 3 · edited Oct 14 '19 at 13:53

I would like to argue that this can be done with pure CSS, but it's about how you structure your HTML & CSS. You don't need to use Javascript / jQuery for any of this, it's just about being sensible with your hierarchy and DOM structure.

.wrapper input[type=checkbox] {
  display: none;
}

.wrapper label {
  width: 100%;
  height: 100%;
}

.wrapper input[type=checkbox]:checked+label {
  background-color: #000;
  color: #fff;
}

<fieldset class="wrapper">
  <input id="YourId" value="YourValue" type="radio">
  <label for="YourId">
        Your Label
    </label>
</fieldset>

You can use any element you want to wrap, a <fieldset>, a <div> or whatever floats your boat. The reality is that structuring your DOM / HTML in a certain way can mean the difference between needing to use Javascript, or maybe even a whole library (jQuery) for quite a simple solution.

Sorry for posting in quite a dated topic, but I just wanted to showcase that the use of Javascript / jQuery really isn't needed for something such as this.

Form CSS: Styling a radio box's parent (label) based on checked / unchecked status

3 Answers3

Linked