Affect div when radiobutton is checked with css - css

Question

I'm trying to create a css-only select thingy.
I've got a container with three radiobuttons. The active radiobutton must be placed in the middle (vertically) of the container. The radiobuttons have to move as a whole, meaning that if the top radiobutton is selected the other two have to be spaced just beneath it; and if the middle radiobutton is selected, the other radiobuttons have to be spaced just above and just below the selected radiobutton.
It's hard to explain, but hear is what I've got so far.
http://jsfiddle.net/PaulvdDool/ZwdUL/1/
In this example the blue button is in the middle of the container. When I select the green button, all three buttons must move down 125px (the height of one button). But I can't make it work.
I can't seem to affect the other radiobuttons when one radio button is checked. I've tried to put an extra container around the buttons and change the margin-top, but I could not affect the container.
<div id="extracontainer">
<form>
<radiobutton 1 + label>
<radiobutton 2 + label>
<radiobutton 3 + label>
</form>
</div>
I've also tried to put an extra div above the buttons and change the height, but I couldn't affect this div too.
<div id="spacer"></div>
<form radiobuttons>
I'm guessing I'm using the wrong selector, doing something else wrong or am trying to do something impossible with just css.
Any CSS solutions?

Answer 1

What you really need here is jQuery or some other JavaScript library (or if you're a native-js freak, a pure JavaScript). You need to capture events, and then to change the CSS properties of corresponding elements you want to update.
It is simply not possible to do this via CSS at this point.
I hope this helps.

Answer 2

This can be done. It is all a matter of specificity as well as document structure.
I had to add a class to each label: cPantsx where x is the same number as the pants radio.
Then I then had to rearrange the html as follows:
<div id="pantscontainer">
<input type="radio" name="pants" id="pants1" value="pants1" />
<input type="radio" name="pants" id="pants2" value="pants1" />
<input type="radio" name="pants" id="pants3" value="pants1" />
<label for="pants1" class='cPants1'><span></span></label>
<label for="pants2" class='cPants2'><span></span></label>
<label for="pants3" class='cPants3'><span></span></label>
</div>​
everything had to become position:relative; so that I could adjust the placement within the container.
After that the magic really happens here:
#pantscontainer > input[id="pants1"]:checked ~ .cPants1 span{
top:125px;
}
#pantscontainer > input[id="pants1"]:checked ~ .cPants2 span{
top:-125px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants2 span{
top:0px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants1 span{
top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants3 span{
top:-125px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants1 span{
top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants2 span{
top:125px;
}
Basically by adjusting the placement of the elements on the page, I was able to very specifically target the elements in question and make sure that they always moved out of each others way.
Here is a fork of your fiddle
I should mention that this is by no means an easy solution. It is more like a house of cards. If you had to add more elements you would need to re-write the whole thing. It will scale, but it would take a lot of effort to do so.