如何創建複選框圖像庫

我想創建一些完全基於圖像的複選框。這意味着，當我點擊該圖像時，邊框顏色會變成某種顏色：可以說藍色並保持藍色，直到下一次單擊將其取消。問題是我不知道從哪裏開始，我創建了一些帶有綠色標記的複選框基本映像，但是我沒有成功將它們轉換爲我想要的請求。這是最後的結果，我需要得到： http://i68.tinypic.com/b5496s.jpg http://i67.tinypic.com/2vdk07r.png 如何創建複選框圖像庫

這是到目前爲止我的代碼，這是不是在：

的圖像上tinypic在以下鏈接託管正確的方向可言：

input[type="checkbox"]:not(old){ 
    width: 28px; 
    margin: 0; 
    padding: 0; 
    opacity: 0; 
} 

input[type="checkbox"]:not(old)+label{ 
    display: inline-block; 
    margin-left: -28px; 
    padding-left: 28px; 
    line-height: 24px; 
    background: url(http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png) no-repeat 0 0; 
} 

input[type="checkbox"]:not(old):checked + label{ 
    background-position : 0 -24px; 
} 

<div class="checkbox"> 
    <input id="chk1" type="checkbox" name="animal" value="dog"/> 
    <label id="lbl1" >Dog</label> 
    <br> 
    <input id="chk2" type="checkbox" name="animal" value="cat"/> 
    <label id="lbl2" >Cat</label> 
    <br> 
    <input id="chk3" type="checkbox" name="animal" value="horse"/> 
    <label id="lbl3" >Horse</label> 
</div>

來源

2016-03-07 Brk

'：沒有（舊）'：什麼是'老'？ – fcalderan

@fcalderan可能是CSS「黑客」，只適用於現代瀏覽器（瞭解'：not（）'選擇器）的樣式。 'old'是一個簡單的選擇器，旨在不匹配任何東西。 – pawel

使用此HTML：

<label> 
    <input type="checkbox" /><img src="//placehold.it/100x100" /> 
</label>

可以隱藏複選框和風格基礎上，:checked僞類和相鄰的兄弟選擇了img，例如：

/* hiding the checkbox */ 
input[type="checkbox"] { 
    position:absolute; 
    opacity:0; 
} 
/* unchecked state - black border */ 
input[type="checkbox"] + img { 
    border:2px solid #000; 
    border-radius:6px; 
} 
/* checked state - blue border */ 
input[type="checkbox"]:checked + img { 
    border-color:#4df; 
}

演示：https://jsfiddle.net/7zrpr5fd/

來源

2016-03-07 10:20:19 pawel

如何創建複選框圖像庫

回答

相關問題