html - 尝试样式单选按钮（使用背景图像）

Question

我正在尝试设置单选按钮的样式，我正在用背景图像替换圆圈，当用户单击它时，按钮所在的容器应该会出现内框阴影。

为简单起见，我将跨度设置为灰色，假设灰色是背景图像

小提琴：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>