美化表单——自定义单选按钮和复选按钮

<form class="form" method="post">    
            <fieldset>
                <legend>Which genres do you like?</legend>
                <input type="checkbox" value="action" id="check-1" name="genre"><label for="check-1" class="">Action / Adventure</label>
                <input type="checkbox" value="comedy" id="check-2" name="genre"><label for="check-2" class="">Comedy</label>
                <input type="checkbox" value="epic" id="check-3" name="genre"><label for="check-3" class="">Epic / Historical</label>
                <input type="checkbox" value="science" id="check-4" name="genre"><label for="check-4" class="">Science Fiction</label>
                <input type="checkbox" value="romance" id="check-5" name="genre"><label for="check-5" class="">Romance</label>
                <input type="checkbox" value="western" id="check-6" name="genre"><label for="check-6" class="">Western</label>
            </fieldset>        
            <fieldset>
                <legend>Caddyshack is the greatest movie of all time, right?</legend>
                <input type="radio" value="1" id="radio-1" name="opinions"><label for="radio-1" class="">Totally</label>
                <input type="radio" value="1" id="radio-2" name="opinions"><label for="radio-2" class="">You must be kidding</label>
                <input type="radio" value="1" id="radio-3" name="opinions"><label for="radio-3" class="">What's Caddyshack?</label>
            </fieldset>
        </form>

<script type="text/javascript">
        jQuery.fn.customInput = function(){
            $(this).each(function(i){
                if($(this).is('[type=checkbox],[type=radio]')){
                    var input = $(this);
                    //get the associated label using the input's id
                    var label = $('label[for='+input.attr('id')+']');
                    //get type,for classname suffix
                    var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
                    //wrap the input + label in a div
                    $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
                    //find all inputs in this set using the shared name attribute
                    var allInputs = $('input[name='+input.attr('name')+']');
                    //necessary for browsers that don't support the :hover pseudo class on labels
                    label.hover(function(){
                        $(this).addClass('hover');
                        if(inputType == 'checkbox' && input.is(':checked')) {
                            $(this).addClass('checkedHover');
                        }
                    },function(){
                        $(this).removeClass('hover checkedHover');
                    });
                    
                    //bind custom event, trigger it, bind click,focus,blur events
                    input.bind('updateState',function(){
                        if(input.is(':checked')){
                            if(input.is(':radio')){
                                allInputs.each(function(){
                                    $('label[for='+$(this).attr('id')+']').removeClass('checked');
                                });
                            };
                            label.addClass('checked');
                        } else {
                            label.removeClass('checked checkedHover checkedFocus');
                        }
                    })
                    .trigger('updateState')
                    .click(function(){
                        $(this).trigger('updateState');
                    })
                    .focus(function(){
                        label.addClass('focus');
                        if(inputType == 'checkbox' && input.is(':checked')) {
                            $(this).addClass('checkedFocus');
                        }
                    })
                    .blur(function(){
                        label.removeClass('focus checkedFocus');
                    });                    
                }
            });
        }
    </script>
    <script type="text/javascript">
        $(function(){
            $('input').customInput();
        });
    </script>​

/* CSS for customized radio buttons and check boxes */
            /* page styles */
            body {
                font-size: 62.5%;
            }
            fieldset {
                padding: 0 15px 3em;
                border: 0;
            }
            legend {
                font-size: 1.4em;
                font-weight: bold;
                padding: .2em 5px;
            }
            /* wrapper divs */
            .custom-checkbox, 
            .custom-radio { 
                position: relative; 
            }
            /* input, label positioning */
            .custom-checkbox input,
            .custom-radio input {
                position: absolute;
                left: 2px;
                top: 3px;
                margin: 0;
                z-index: 0;
            }
            .custom-checkbox label,
            .custom-radio label {
                display: block;
                position: relative;
                z-index: 1;
                font-size: 1.3em;
                padding-right: 1em;
                line-height: 1;
                padding: .5em 0 .5em 30px;
                margin: 0 0 .3em;
                cursor: pointer;
            }
            /* states */
            .custom-checkbox label { 
                background: url(http://www.w3cplus.com/sites/default/files/checkbox.gif) no-repeat; 
            }
            .custom-radio label { 
                background: url(http://www.w3cplus.com/sites/default/files/radiobutton.gif) no-repeat; 
            }
            .custom-checkbox label, 
            .custom-radio label {
                background-position: -10px -14px;
            }
            .custom-checkbox label.hover,
            .custom-checkbox label.focus,
            .custom-radio label.hover,
            .custom-radio label.focus {
                background-position: -10px -114px;
            }
            .custom-checkbox label.checked,
            .custom-radio label.checked {
                background-position: -10px -214px;
            }
            .custom-checkbox label.checkedHover,
            .custom-checkbox label.checkedFocus {
                background-position: -10px -314px;
            }
            .custom-checkbox label.focus,
            .custom-radio label.focus {
                outline: 1px dotted #ccc;
            }​

效果图:

效果示例: 点击打开链接