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

【问题标题】：Change the outlook of checkbox as image将复选框的外观更改为图像
【发布时间】：2014-07-29 22:00:10
【问题描述】：

您好，我有不同的复选框，我想要一个图像而不是复选框，所以如果我单击图像，背景应该会改变，以指示它是否被选中。

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

【问题讨论】：

标签： html css

【解决方案1】：

见Here。您可以将其应用于您的代码并具有自定义背景

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/

【讨论】：

这是有效的，但如果我添加一个 div 类，它与我的其他按钮冲突。然后他们不工作。
发布您的代码。当我不知道您的 div 类具有哪些属性时，我无法为您提供帮助
嗨，Bijan 我的图像显示不完整。只显示图像的上半部分。
我不知道如何帮助缺少 2 张图像，但我想图像尺寸需要减小或复选框尺寸需要增加