使用CSS3設置復選框標簽的樣式

Question

我已經使用CSS3為復選框設置了樣式，並且可以正常工作（通過隱藏復選框並在其上放置標簽/樣式化標簽）。 現在，我找到了一些CSS3創建的圖標，希望將其用於復選框。 由於該復選框是使用CSS3設置樣式的，因此我可以很輕松地將CSS3創建的圖標用於復選框。

好吧...我以為這很容易，但是我沒有成功。

CSS3創建的圖標是聲音圖標。 一個帶有“聲音打開”，另一個帶有“聲音關閉”。 現在，我希望在選中復選框時使用“打開聲音”圖標，而在未選中時使用“關閉聲音”圖標。

請看我的小提琴： http : //jsfiddle.net/mauricederegt/TRtvx/

這是我嘗試過的：

基本上， input:checked + label:before應該具有.volume-on:before樣式。 這行得通，我在按鈕div中看到了“聲波”。 不幸的是，我再也看不到圖標的其余部分了（圓錐體）。

我想要的甚至有可能嗎？ 以及如何做到這一點？

親切的問候，

Answer 1

您可以使用CSS Sprites實現此目的-基本上，您將顯示單個圖像的不同部分，充當兩個圖像。 看看這個很棒的教程： http : //css-tricks.com/css-sprites/