0
我想創建一些完全基於圖像的複選框。這意味着,當我點擊該圖像時,邊框顏色會變成某種顏色:可以說藍色並保持藍色,直到下一次單擊將其取消。 問題是我不知道從哪裏開始,我創建了一些帶有綠色標記的複選框基本映像,但是我沒有成功將它們轉換爲我想要的請求。 這是最後的結果,我需要得到: 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>
':沒有(舊)':什麼是'老'? – fcalderan
@fcalderan可能是CSS「黑客」,只適用於現代瀏覽器(瞭解':not()'選擇器)的樣式。 'old'是一個簡單的選擇器,旨在不匹配任何東西。 – pawel