
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <form action="" method="POST"> In Love?<br><label for="love_yes" ><input type="radio" name="rad" value="Yes" id="love_yes" /><span class="rad_img"></span>Yes</label><br> <label for="love_no" ><input type="radio" name="rad" value="No" id="love_no"/><span class="rad_img"></span>No</label><br> <label for="love_maybe" ><input type="radio" name="rad" value="Maybe" id="love_maybe"/><span class="rad_img"></span>Maybe!</label> </form> </body> </html> |
DEMO
In Love?Add the following CSS which will do the magic.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body{ background:black; color:white; font-family:verdana; } input[type="radio"]{ display:none; } label{ cursor:pointer; } span.rad_img{ display:inline-block; vertical-align:middle; background:url('//codeaffair.com/custom/radio.png') no-repeat; background-position:0px 0px; min-width:15px; min-height:15px; margin-right:5px; } input[type="radio"]:checked + span.rad_img{ background-position:-20px 0px; } |
DEMO
In Love?In the next rule we change the background-position or in layman terms we changed the image of the selected radio button. We did this by using this selector: input[type=”radio”]:checked + span.rad_img. this selects the span with a class “rad_img” which comes directly after the checked radio button. Since, I used everything inside the label I didn’t have to add any javascript handlers.
Now, if you have a different situation where you can’t use a label you can use jquery’s trigger() function or even change the selected attribute for the radio buttons. By using the same logic you can also style the checkboxes by using appropriate images.
With time I have found this technique very helpful, but if you have a better technique in any sense of the word “better” please do share!
Follow Us