Using Images for Radio Buttons and Checkboxes

Perhaps not ideal, but on all projects I use this method of changing the appearance of the usual input.ov

So there's this:

<ZXXQ1QXZ id="brendbuk"  name="brendbuk" value="da" type="checkbox"  />"

<input type="radio" value="Sub-Island" name="radios" />

To cover the input with a picture, take JS.

Connect jQuery and at the bottom of the code, or on the page where you need to change the view inputov prescribe 

<script type="text/javascript">   
$(function() {
    $(document.body).addClass('js');

    $('#search input[type="text"], #subscribe input[type="text"]').focus( function() {
        var title = $(this).attr('title');
        var val = $(this).val();
       
        val == title ? $(this).val('') : false;
    });
   
    $('#search input[type="text"], #subscribe input[type="text"]').blur( function() {
        var title = $(this).attr('title');
        var val = $(this).val();
       
        val == "" ? $(this).val(title) : false;
    });
   
    $('#menu > li').each( function() {
        var ul = $(this).find('ul');
       
        if (ul.length > 0) {
            var div = $(this).find('div');
            ul.css({visibility: 'visible'}).find('li:first').addClass('first-child').end();
            var w = ul.width();
            div.css('width',w + 3);
            if (w+ul.offset().left > $('#page').width() + $('#page').offset().left) {
                div.css('margin-left', $('#page').width() + $('#page').offset().left - w - ul.offset().left - 3);
            }
            ul.css('visibility','');
        }
    });
   
    $('#proj_l').click( function() {
        var line = $('#projs_line');
        var frst = line.find('.proj:first');
        frst.appendTo(line);
        return false;
    });
   
    $('#proj_r').click( function() {
        var line = $('#projs_line');
        var last = line.find('.proj:last');
        last.prependTo(line);
        return false;
    });
   
    $('#tr_nums a').click( function() {
        var href = $(this).attr('href');
        $(this).parent().addClass('act').siblings().removeClass('act');
        $(href).removeClass('hide').siblings('div').addClass('hide');
        return false;
    });
   
    $('.checkbox').each( function() {
        var th = $(this);
        var text = $(this).text();
        var inp = th.find('input');
        var name = inp.attr('name');
        var val = inp.val();
        var dis = false;
        var che = "";
        inp.attr('checked') ? che=" checked":che="";
        inp.attr('checked') ? dis="":dis=" disabled='disabled'";
       
        th.replaceWith("<div class='check" + che + "'><input type='hidden' value=" + val + " name='" + name + "'" + dis + "/>" + text + "</div>");
    });
   
    $('.check').live('click', function () {
        var th = $(this);
        var inp = th.find('input');
        inp.attr('disabled') ? inp.removeAttr('disabled'):inp.attr('disabled','disabled');
        th.toggleClass('checked');
        return false;
    });
   
    $('.radios').each( function() {
        var th = $(this);
        var name = $(this).find('input:first').attr('name');
        var val = $(this).find('input:checked').attr('value');
        if (val==undefined) val="";
       
        var rep = "<div class='radio_g'><input type='hidden' name='" + name + "' value='" + val + "' />";

        th.find('.radio').each( function() {
            var inp = $(this).find('input');
            inp.attr('checked') ? che=" checked":che="";
            var txt = $(this).text();
            var vl = inp.val();
            rep += "<div class='radio_b" + che + "' val='" + vl + "'>" + txt + "</div>";
        });
       
        rep += "</div>";
        th.replaceWith(rep);
    });

    $('.radio_b').live('click', function() {
        var th = $(this);
        var inp = $(this).parents('.radio_g').find('input');
        var val = th.attr('val');
       
        inp.val(val);
        $(this).addClass('checked').siblings().removeClass('checked');
    });

});
</script>

And you. inputYou conclude in html as follows:

                    <div class="radios">
  ZXQ2QXXZ  XQ4QXZZZX5QXZ   XXXQ8QXZZZZZXXXXZZZZZZZXXX10QXX11QXZZZZZXXXQ12QXQX13QXXXXQ14QZZZZZZZK16QXX17QXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 ZXXQ1QXZZXXQ2QXZZZ ZZZXX5QXZ  ZXXQ8QXZZZZXXXXXZZZZZZZZXXX10QXX11QXZZZZXXXXQ12QXXQX13QXZZ14QXZZZZZZQ16QXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  ZXQ2QXXZ  XQ4QXZZZX5QXZ   ZXXXQ8QXZZZZZXXXXXQ10QXX11QXZZZZZXXXQ12QXQX13QXXZZ14QXZZZZZZ15QXXXQ16QZXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                    </div>

        <div class="checkbox">
ZXXQ0QXZZZZZZXXXQ1QXXZZZZZZZZ ZZZZXXXQ5QXZ ZXQ6QZZZZX8QXZ="foto" nameZ="ZXXQ11QXZ" value="D" ZXQ13QXXZ="ZZZZZZZXQ14Q15QXZ/ZZZZZZZZZXXXXXXX/ZXXXXXXXXXXXXXXXXXXXXXXXXXXX/Z/ZXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 ZZXXQ1QXZ ZZZ ZZZ  <ZZZZZZZXXQ8QXZZ="fotoZZ">ZZZ Large format Photo ZXQ11Q11QXZ/ZXXXQ13QXZ
        </div>

That's it, html registered, js connected, there is only a case for css

.check.checked {
    background: url("../images/checked.png") no-repeat scroll 0 2px transparent;
}

.check {
    background: url("../images/check.png") no-repeat scroll 0 2px transparent;
    color: #838485;
    cursor: pointer;
    display: block;
    float: left;
    font: 400 10px/14px tahoma;
    height: 18px;
    margin: 0 0 0 7px;
    padding: 3px 0 3px 23px;
    width: 107px;
}

.radio_b.checked {
    background: url("../images/checked.png") no-repeat scroll 0 2px transparent;
}

.check, .radio_b {
    background: url("../images/check.png") no-repeat scroll 0 2px transparent;
    color: #838485;
    font: 400 10px/14px tahoma;
    height: 12px;
    margin: 0 0 0 7px;
    padding: 2px 0 4px 24px;
}

That's it, it turns out that inputyou