Trying to Style Radio button (using background-image) - html

Question

I am trying to style a radio button, I am replacing the circle with a background image, when the user clicks it the container the button is in is supposed to have an inner box shadow appear.
I styled the spans grey for simplicity, assume the grey color is a background-image
Fiddle: http://jsfiddle.net/CF5qc/
HTML
<div class="contain">
<span>
<input type="radio" name="test" value="1">
<label></label>
</span>
<span>
<input type="radio" name="test" value="2">
<label></label>
</span>
<span>
<input type="radio" name="test" value="3">
<label></label>
</span>
</div>
CSS
.contain { width: 300px; margin: 10px auto; overflow:hidden;border: 1px solid #e5e5e5; }
span {
display:block; width:100px; height:100px; border-right: 1px solid #e5e5e5;
-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; float:left;
}
span:last-of-type { border:none; }
input { width:20px;height:20px;margin:40px; }
input[type=radio]{display:none;}
label {
width:100%;height:100%;display:block; background-color: #f8f8f8; cursor:pointer;
}
input[type=radio]:checked + label {
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

Answer 1

Your labels aren't associated with any elements. To make this trick work, you'll need to assign the radio buttons an ID and use the for attribute on the labels to pair them up.
<input type="radio" name="test" value="1" id="rb1" checked />
<label for="rb1"></label>