单个复选框图像替换

Question

我希望尝试以下链接中的内容，但是我希望每个复选框都有不同的图像。有没有办法做到这一点？我尝试为每个项目设置不同的类，然后将类添加到复选框中，但这似乎不起作用……默认复选框保持不变。

我的尝试： https://jsfiddle.net/9qjj7012/

<div class="AccordionPanel" id="acc-step-3">
    <div class="AccordionPanelTab">Step Three - Equipment Package</div>
    <div class="AccordionPanelContent">
        <div class="">
            <input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
            <input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
            <input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
            <input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
        </div>

        <div class="form-gap"></div>

        <input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
        <input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
        <input name="reset" type="reset" class="form-btn form-reset" value="Reset">
    </div>              
</div>

我想要的结果示例： http://codepen.io/jointmedias/pen/HqCJe（每个复选框都有单独的图像除外）

新的 JSFIDDLE：https://jsfiddle.net/9qjj7012/

Answer 1

您做错了什么，是您为复选框分配了一个类，而您引用的示例中的 CSS 规则没有选中复选框，而是选择了标签。复选框实际上是隐藏的，它是您看到的标签。

看看这个： http://codepen.io/DavidvanDriessche/pen/xVwJgd

在此示例中，标签具有不同的类，css 规则按如下方式操作：

对于所有复选框：

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

对于所有具有类 background1 且位于复选框之后的标签：

input[type=checkbox] + label.background1 {
  background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}

对于所有具有类 background2 且跟随复选框的标签

input[type=checkbox] + label.background2 {
  background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}

对于所有具有以“background”开头并跟随复选框的类属性的标签：

input[type=checkbox] + label[class*="background"] {
  background-size: 50%;
  height: 250px;
  width: 250px;
  display: inline-block;
  padding: 0 0 0 0px;
}

我使用最后一条规则的唯一原因是它允许您将所有常见的格式化代码放入一个 CSS 规则中，并且您不必为针对特定背景类的每个规则重复它，但如果你愿意，这是一个很好的选择。

Answer 2

目前checkbox 不支持background 属性。幸运的是，复选框 label 也可用作已分配 (for=checkboxId) 复选框的可点击区域。所以想法是使用label 元素制作一个假复选框，然后在选中时更改它的背景值。

input { display:none; } /* hide the checkbox. Label is our clickable area */
label {                 /* define the clickable area */
    height: 150px;      
    width: 150px;
    display: inline-block;
    border: 2px solid;
}    

/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg'); 
}

See Demo