I have styled a checkbox using CSS3 and this is working (by hiding the checkbox and putting/styling a label over it). Now I have found some CSS3 created icons which I want to use for my checkbox. Since the checkbox is styled using CSS3, I though it would be simple to use the with CSS3 created icons for the checkbox.
Well… I thought it would be easy, but I am unsuccessful doing so.
The CSS3 created icons are sound icons. One with “sound on” and one with “sound off”. Now I want the “sound on” icon to be used when the checkbox is checked, and the “sound off” when it’s unchecked.
Please see my fiddle: http://jsfiddle.net/mauricederegt/TRtvx/
This is what I’ve tried:
Basically input:checked + label:before should have the .volume-on:before style. This worked and I saw the “sound waves” in my button div. Unfortunaly I couldn’t see the rest of the icon anymore (the cone).
Is what I want even possible? And how to accomplish this?
Kind regards,
You can use CSS Sprites to achieve this – basically you would be showing different parts of a single image, acting as two images. Check out this great tutorial: http://css-tricks.com/css-sprites/