user1607540 user1607540 - 3 years ago 253
CSS Question

how to use images as radio buttons

I am trying to create a simple enabled/disabled radio button grouping on a form. I had planned on using an image of a check mark for enabled and an x disabled. I want the element that wasn't clicked to go gray to make it clear which is selected. Help would be appreciated.

Answer Source

Try the following


$(function() {
    $('input:radio').each(function() {
        $('<a class="radio-fx" href="#"><div class="radio"></div></a>').insertAfter(this);
    $('.radio-fx').live('click',function(e) {
          var $check = $(this).prev('input');
          $('.radio-fx div').attr('class','radio');
          $check.attr('checked', true);


.radio {
    background: url(radiobutton_no.png) no-repeat;
    width: 16px;
    height: 16px;
.radio-checked {
    background: url(radiobutton_yes.png) no-repeat;
    width: 16px;
    height: 16px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download