html - css - 替换复选框图像

Question

您好，我知道这已得到解答，但我无法让它为我工作。

我有 HTML

<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="am_2" value="1"/>
<label for="am_2">&nbsp; &nbsp;&nbsp;</label> 

然后

.amPmCheckbox input[type="checkbox"]{
display: none;}     

.amPmCheckbox input[type="checkbox"]+label{
background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;}

.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;}

但它没有拾取选中的图像。我不知道是什么问题，有人有什么想法吗？这是一个 fiddle 顺便说一句

http://jsfiddle.net/ksCk8/

Answer 1

当复选框被选中时，它会拾取选中的图像。您遇到的问题是无法单击任何内容来选中复选框。

将 AM/PM 移到标签中并使用填充将其推到上方而不是空格处。

HTML:

<div class="amPmCheckbox">
    <input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
    <label for="am_2">AM</label>
</div>

CSS:

.amPmCheckbox input[type="checkbox"] {
    display: none;
}
.amPmCheckbox input[type="checkbox"]+label {    
    background: url('http://renegadeox.com/img/off.png') no-repeat;
    height:17px;
    padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
    background: url('http://renegadeox.com/img/on.png')  no-repeat;
    height:17px;
}

http://jsfiddle.net/JkDhN/1/