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

<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;            }​

效果图:

效果示例:点击打开链接