Radio button background only with CSS?

dixonfuzzy

New Member
What I need to do is to replace the look of the radio button with image. That can be easily achieved with jQuery, but it this case I need to do it with CSS only. Is there any way to do that? Here is my HTML:\[code\]<div class="radio-buttons"> <div class="holder"> <span></span> <input type="radio" class="radio" id="cheetah" value="" /> </div> <div class="holder"> <span></span> <input type="radio" class="radio" id="horse" value="" /> </div> <div class="holder"> <span></span> <input type="radio" class="radio" id="lion" value="" /> </div></div>\[/code\]I've tried to apply a style \[code\]background-image:\[/code\] on the radio button, but of course it didn't work. Then I added the \[code\]<span>\[/code\]'s and I am wonderig if I can set style to the buttons \[code\]display: none\[/code\] , and somehow on \[code\]input:checked\[/code\] to display the \[code\]<span>\[/code\] which will be styled with \[code\]background-image:\[/code\] ? Is this the right way or I am on completely wrong direction? And can it be achieved with CSS only at all ?Edit: the radio buttons might be changed to checkboxes if needed.
 
Back
Top