How to change style of radio and checkbox input [duplicate]

Answer 1

The browser itself handles the look of radio buttons and checkboxes, as well as dropdown/selects. You can however hide the radio buttons, replace them with images, and then modify your radio/check value using jQuery. Font Awesome (http://fortawesome.github.io/Font-Awesome/icons/) has some cool icons that you can use for this.

Here is a demo

    Radio 1 - 
    
    


    Radio 2 - 
    
    


$('span.fa').on('click', function() {
    $('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o');
    $(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o');

    //Check corresponding hidden radio
    $(this).prev('input.radio').prop('checked', true);
});