個別複選框圖像替換

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