border based on radio selection problem

[SF23103]

Hello,

 

I am having difficulty with this one.  I am trying to change the border around the entire div (e.g. #option1) instead of just the text.  As you can see, when you click each radio button it changes the border around the option text, but not the entire div.  Any suggestions?

 

JSFIDDLE:   https://jsfiddle.net/1hdv2n3h/1/

 

HTML

<div id="wine_club_selection">

<div id="option1">
<p><input type="radio" name="club_type" checked="checked" value="option 1"><br/>
<span class="bold_text">Option 1</span><br/>
3 Bottles<br/>
15% Discount<br/></p></div>

<div id="option2">
<p><input type="radio" name="club_type" value="option 2" ><br />
<span class="bold_text">Option 2</span><br />
6 Bottles<br />
20% Discount<br/>
</p></div>

<div id="option3">
<p><input type="radio" name="club_type" value="option 3"><br>
<span class="bold_text">Option 3</span><br />
12 Bottles<br />
25% Discount<br />
</p></div>

</div>

CSS

#wine_club_selection {
	height:200px;
	width:800px;
}

#option1 {
float:left;
width:266px;
}

#option1 p {
	text-align:center;
}

#option2 {
float:left;
width:266px;
}

#option2 p {
	text-align:center;
}

#option3 {
float:right;
width:266px;
text-align: center;
}

#option3 p {
	text-align:center;
}


.bold_text {
	font-weight:800;
}


#option1 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option2 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option3 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

[benanamen]

#wine_club_selection {

height:200px;

width:800px;

border: thin solid #F00;

}

[SF23103]

That puts a border around all three selections.  If you check out the JsFiddle, I'm looking to move the dynamic box from around the words to around the whole option box.

[benanamen]

Only when it is checked? If so, look here: http://jsfiddle.net/QqVCu/14/

Edited January 4, 2016 by benanamen

[SF23103]

Yes, that's what I'm going for, but on mine for some reason it's doing the border around the text "option 1" and not the entire option1 div.  

[Muddy_Funster]

You can't achieve what you are trying to do with just CSS alone.  You are trying to alter the style of a parent element and CSS doesn't have a parent selector.  You could maybe get away with creating an underlay element after the input using absolute positioning and change that using a sibling selector javascript using jquery would be far cleaner.