Возможно не идеал, но на всех проектах применяю такой способ смены вида обычных inputов

Итак есть :

<input id="brendbuk"  name="brendbuk" value="да" type="checkbox"  />

<input type="radio" value="Полуостров" name="radios" />

Что-бы зактыть input картинкой возьмём JS

Подключим jQuery и внизу кода, либо на странице где нужно сменить вид inputов прописать 

<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>

А сами inputы заключить в html таким образом:

                    <div class="radios">
                        <div class="radio"><input type="radio" value="Полуостров" name="radios_configuraciya_stenda" />Полуостров</div>.
                        <div class="radio"><input type="radio" value="Аренда" name="radios_configuraciya_stenda" />Аренда</div>
                        <div class="radio"><input type="radio" value="Остров" name="radios_configuraciya_stenda" />Остров</div>
                    </div>

        <div class="checkbox">
        <input id="foto" name="foto" value="да" type="checkbox"  />
        <label for="foto">Фото большого формата</label>
        </div>

Всё, html прописали, js подключили, осталось дело лишь за 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;
}

Вот и всё, получаются вакие вот inputы