Пытаясь вставить кнопку «Радио» (используя фоновое изображение)

Question

Я пытаюсь создать переключатель, я заменяю круг фоновым изображением, когда пользователь нажимает на него, в котором находится кнопка, внутри которой должна находиться кнопка появится окно тени.

я стиле пролеты серый для простоты, предположим, что серый цвет является фоновое изображение

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

Ваши ярлыки не связаны ни с какими элементами. Чтобы этот трюк работал, вам нужно назначить радиокнонам ID и использовать атрибуты for на ярлыках, чтобы соединить их.

<input type="radio" name="test" value="1" id="rb1" checked /> 
<label for="rb1"></label>