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

我想要一个单选按钮的样式，我用一个背景图像替换圆形，当用户单击它时，按钮所在的容器应该有一个内部框阴影出现。试图样式单选按钮（使用背景图像）

我风格跨度灰色为简单起见，假设灰度颜色是背景图像

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); 
}

来源

2013-10-15 user934902

您的标签不与任何元素相关联。要使此技巧奏效，您需要为单选按钮指定一个ID，并使用标签上的for属性将它们配对。

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

来源

2013-10-15 19:30:59

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

回答

相关问题