尝试样式单选按钮（使用背景图像） [英] Trying to Style Radio button (using background-image)

问题描述

我试图设置一个单选按钮，我用一个背景图片替换圆圈，当用户点击它的容器按钮是在应该有一个内框阴影出现。

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

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

推荐答案

与任何元素。要使这个技巧工作，你需要分配单选按钮一个ID，并使用标签上的属性对它们进行配对。

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>

这篇关于尝试样式单选按钮（使用背景图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！