Geek Answers Handbook

CSS form: creating the parent element (label) of the radio window based on the marked / unverified status

So I have a form. Most of the questions asked on the forms use radio inputs.

I'm going with

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

I style the labels using: hover, giving it a subtle change in background to indicate which option you highlight. However, I want the label for the selected option to have a different colored background. Is there a way to do this using CSS, or do I need to go with jQuery? What I want to do is declare the parent (label) style of the marked input field.

After another brainstorming session, I would like to change the parent set of bkg-color fieldset when filling in all the necessary fields. I'm starting to feel that jQuery is the way to go here ..?

[Notes:] Using HTML5 / CSS3 / jQuery. Only needs to be compatible with Chrome or Firefox. This is what needs to be run locally on a laptop, so while it works fine on this computer, I don’t have to worry about compatibility in older browsers, etc. :)

Edit: Decision posted by Nick Carver. A few add-ons for working properly with switches. 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); });
+4
source share
3 answers

There is no way with pure CSS, as you are putting the parent, not the child. If you did this in jQuery, you would do something like:

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

The general style of <fieldset> will depend on your layout, if you have some kind of container that contains each set of radio stations, you can check if any of them had an element :checked inside ... if all this do, then use the same .toggleClass() approach to enable or disable the "all checked" class.

+2
source

There is no way to do this with vanilla CSS. You will need to use jQuery to add onclick behavior to fields that add / remove a class from the label for the selected one. Then you can add the: hover class to your selector. For best results, I think you need to make sure your labels are set to display: inline-block; for best results.

+1
source

I would like to prove that this can be done using pure CSS, but it concerns how you structure your HTML & CSS. You do not need to use Javascript / jQuery for all this, it is just reasonable 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, <fieldset> , <div> or any other that floats on your boat. The reality is that structuring your DOM / HTML in a certain way can mean the difference between having to use Javascript or even a whole library (jQuery) for a fairly simple solution.

Sorry for posting in a rather outdated topic, but I just wanted to demonstrate that using Javascript / jQuery is really not necessary for something like this.

0
source

More articles:


All Articles