圖片更換複選框

Question

我試圖使用複選框自定義圖像，在這個問題討論：

Pure CSS Checkbox Image replacement

我複選框出現在一個網格，所以不需要有相關的標籤他們。但是，我發現如果標籤不存在，那麼在該問題中討論的技術就不起作用。

例如，這裏的相關CSS：

input[type=checkbox] { 
    opacity: 0; 
} 

input[type=checkbox] { 
    height: 17px; 
    width: 17px; 
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat; 
} 

input[type=checkbox]:checked { 
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat; 
    height: 17px; 
    width: 17px; 
    padding: 0 0 0 0px; 
} 

聲明只是一個簡單的input不渲染圖像：

<input type="checkbox"> 

但是，如果我修改CSS，追加+ label，並在標記中添加標籤，正如解決方案中討論的那樣，它可以工作：

input[type=checkbox] { 
    opacity: 0; 
} 

input[type=checkbox] + label { 
    height: 17px; 
    width: 17px; 
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat; 
} 

input[type=checkbox]:checked + label { 
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat; 
    height: 17px; 
    width: 17px; 
    padding: 0 0 0 0px; 
} 

<input type="checkbox"><label></label> 

這如預期呈現。

爲什麼第一個解決方案不起作用？

我該如何實現這一點而不必添加不需要的標籤？

Answer 1

你留在你的第一個例子如下：「不會使」

input[type=checkbox] { 
    opacity: 0; 
} 

這將使

現在，已經刪除了微不足道的一點風度，你可能會問

好，控制現在顯示了...所以，爲什麼不將背景圖像顯示出來？

這是因爲您對放置按鈕，複選框，組合框，文件上傳控件等方式沒有任何真正的控制。標籤解決方案的工作原理是因爲您可以愉快地在css的全部範圍內設計標籤。我提到的控件？沒有太多...

Answer 2

我不是專家，但是，如果您將所有輸入複選框設置爲0不透明度，將不會如果有效地隱藏整個複選框？也許嘗試在這篇文章中提到的方法：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/