个别复选框图像替换

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

对于以“背景”开头的类属性的所有标签，并以下一个复选框：

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