Radio Button Images Not Allowing Value Seelection - html

Question

I am trying to use images in place of radio buttons. When I don't use images I can select the 'male/female' value correctly. However, when I stylize the css to use images the value always defaults to male. The image used is a sample. Can you please help point out my error in the code below. Also, can anyone provide any pointers on how to use different images for the different radio buttons.
HTML:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>
CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content:'';
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
border-style: solid;
border-width: 10px;
}

Answer 1

You don't need to use :before for this when you can just place the img tag within your label like so:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
<img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
<img src="..." />
</label>
And then remove the :before from your CSS
Fiddle: http://jsfiddle.net/L94mK/

Answer 2

As far as i can see, it's returning the proper value... check this JSFiddle
as for giving different images for the radio buttons, you can use nth-child css selector as follows:
input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}
Check this JSFiddle