Html 将复选框的外观更改为图像

嗨，我有不同的复选框，我想有一个图像，而不是复选框，因此，如果我点击图像的背景应该改变，以表明它是否被选中

因为我有不同的复选框，所以我不能将背景作为图像放在CSS中。 请建议我应该如何进行。

请参阅。您可以将其应用于代码并具有自定义背景

HTML:

---

这是可行的，但如果我添加一个div类，它与我的其他按钮冲突。那他们就不行了。把你的代码贴出来。当我不知道您的div类hasHi Bijan的哪些属性时，我无法帮助您。我的图像未完全显示。只显示图像的上半部分。我不知道如何帮助短有2个图像，但我想图像大小需要减少或复选框大小需要增加

<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>

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