<form class="jNice"> <!--- Componenti / Html a cui applicare lo stile jNice --></form>

/* ------------- * Buttons * ------------- */button {    margin: 0px;    padding: 0px;    border: none;    background-color: transparent;    cursor: pointer;    overflow: visible;}*:first-child+html button[type]{width: 1;} /* IE7 */button span {    background: transparent url(../../elements/btn_right.gif) no-repeat scroll right top;    display: block;    float: left;    padding: 0px 4px 0px 0px; /* sliding doors padding */    margin: 0px;}button span span {    background: transparent url(../../elements/btn_left.gif) no-repeat;    color: #FFFFFF;    padding: 1px 4px 0px 8px;    font-weight: normal;    font-size: 10px;    line-height: 13px;    text-transform: lowercase;    display: block;    text-decoration: none;}/* ------------- * Inputs * ------------- */.jNiceInputWrapper {    background: transparent url(../../elements/input_left.gif) no-repeat left top;    height: 23px;    padding: 0px;}.jNiceInputInner {    background: transparent url(../../elements/input_right.gif) no-repeat right top;    padding: 2px 4px 2px 0px;    margin: 0px 0px 0px 4px;}.jNiceInputInner div {    height: 19px;}.jNiceInputInner input {    font-family:Arial, Helvetica, sans-serif;    font-size:12px;    line-height: 18px;    vertical-align: middle;    height: 17px;    color:#404040;        border: 0;    padding: 0px;    margin: 0px;}.jNiceSafari .jNiceInputInner div {    position: relative;    overflow: hidden;}.jNiceSafari input {    background-color: none;    position: absolute;    top: -2px;    left: -4px;    height: 26px; }/* ------------- * Radios * ------------- */.jRadioWrapper {float: left;}.jNiceRadio {    background: transparent url(../../elements/radio.gif) no-repeat center top;    vertical-align: middle;    height: 18px;    width: 18px;    display:block;/*display: -moz-inline-block;*/}/* ------------- * Checkboxes * ------------- */.jNiceCheckbox {    background: transparent url(../../elements/checkbox.gif) no-repeat center top;    vertical-align: middle;    height: 18px;    width: 18px;    display:block;/*display: -moz-inline-block;*/}/* ------------- * Checked - Used for both Radio and Checkbox * ------------- */.jNiceChecked { background-position: center bottom;}/* ------------- * Selects * ------------- */.jNiceSelectWrapper {    width: 132px;    position:relative;    height: 17px;}.jNiceSelectWrapper div span {    float: none;    position: absolute;    width: 104px;    height: 15px;    line-height: 15px;    padding: 0px 3px;    overflow: hidden;    border: 1px solid #CCCCCC;    border-right: none;}.jNiceSelectWrapper div a {    display: block;    position: absolute;    right: 0px;    width: 21px;    height: 17px;    background: url(../../elements/select_right.gif) no-repeat center center;}.jNiceSelectWrapper ul {    position: absolute;    width: 150px;    top: 16px;    left: 0px;    list-style: none;    background-color: #FFF;    border: solid 1px #CCC;    display: none;    margin: 0px;    padding: 0px;    height: 150px;    overflow: auto;    overflow-y: auto;    z-index:100;}.jNiceSelectWrapper ul a {    display: block;    padding: 5px;    text-decoration: none;    color:#0099CC;    background-color: #FFF;}.jNiceSelectWrapper ul a:hover { background:#E1F5FF; }.jNiceSelectWrapper ul a.selected {background: #EDEDED;}/* ------------- * Hidden - used to hide the original form elements * ------------- */.jNiceHidden {display: none;}

/* * UPDATED: 12.19.07 * * jNice * by Sean Mooney (sean@whitespace-creative.com)  * * To Use: place in the head  *  <link href="inc/style/jNice.css" rel="stylesheet" type="text/css" /> *  <script type="text/javascript" src="inc/js/jquery.jNice.js"></script> * * And apply the jNice class the form you want to style * * To Do: Add textareas, Add File upload * ******************************************** */(function($){    $.fn.jNice = function(options){        var self = this;        var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */            /* each form */        this.each(function(){            /***************************              Buttons             ***************************/            var setButton = function(){                $(this).replaceWith('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +'"><span><span>'+ $(this).attr('value') +'</span></span>');            };            $('input:submit, input:reset', this).each(setButton);            /***************************              Text Fields              ***************************/            var setText = function(){                var $input = $(this);                $input.addClass("jNiceInput").wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"><div></div></div></div>');                var $wrapper = $input.parents('div.jNiceInputWrapper');                $wrapper.css("width", $(this).width()+10);                $input.focus(function(){                    $wrapper.addClass("jNiceInputWrapper_hover");                }).blur(function(){                    $wrapper.removeClass("jNiceInputWrapper_hover");                });            };            $('input:text:visible, input:password', this).each(setText);            /* If this is safari we need to add an extra class */            if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});}                        /***************************              Check Boxes              ***************************/            $('input:checkbox', this).each(function(){                $(this).addClass('jNiceHidden').wrap('<span></span>');                var $wrapper = $(this).parent();                $wrapper.prepend('<a href="#" class="jNiceCheckbox"></a>');                /* Click Handler */                $(this).siblings('a.jNiceCheckbox').click(function(){                        var $a = $(this);                        var input = $a.siblings('input')[0];                        if (input.checked===true){                            input.checked = false;                            $a.removeClass('jNiceChecked');                        }                        else {                            input.checked = true;                            $a.addClass('jNiceChecked');                        }                        return false;                });                /* set the default state */                if (this.checked){$('a.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}            });            /***************************              Radios              ***************************/            $('input:radio', this).each(function(){                $input = $(this);                $input.addClass('jNiceHidden').wrap('<span class="jRadioWrapper"></span>');                var $wrapper = $input.parent();                $wrapper.prepend('<a href="#" class="jNiceRadio" rel="'+ this.name +'"></a>');                /* Click Handler */                $('a.jNiceRadio', $wrapper).click(function(){                        var $a = $(this);                        $a.siblings('input')[0].checked = true;                        $a.addClass('jNiceChecked');                        /* uncheck all others of same name */                        $('a[rel="'+ $a.attr('rel') +'"]').not($a).each(function(){                            $(this).removeClass('jNiceChecked').siblings('input')[0].checked=false;                        });                        return false;                });                /* set the default state */                if (this.checked){$('a.jNiceRadio', $wrapper).addClass('jNiceChecked');}            });            /***************************              Selects              ***************************/            $('select', this).each(function(index){                var $select = $(this);                /* First thing we do is Wrap it */                $(this).addClass('jNiceHidden').wrap('<div class="jNiceSelectWrapper"></div>');                var $wrapper = $(this).parent().css({zIndex: 100-index});                /* Now add the html for the select */                $wrapper.prepend('<div><span></span><a href="#" class="jNiceSelectOpen"></a></div><ul></ul>');                var $ul = $('ul', $wrapper);                /* Now we add the options */                $('option', this).each(function(i){                    $ul.append('<li><a href="#" index="'+ i +'">'+ this.text +'</a></li>');                });                /* Hide the ul and add click handler to the a */                $ul.hide().find('a').click(function(){                        $('a.selected', $wrapper).removeClass('selected');                        $(this).addClass('selected');                            /* Fire the onchange event */                        if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }                        $select[0].selectedIndex = $(this).attr('index');                        $('span:eq(0)', $wrapper).html($(this).html());                        $ul.hide();                        return false;                });                /* Set the defalut */                $('a:eq('+ this.selectedIndex +')', $ul).click();            });/* End select each */                        /* Apply the click handler to the Open */            $('a.jNiceSelectOpen', this).click(function(){                                                        var $ul = $(this).parent().siblings('ul');                                                        if ($ul.css('display')=='none'){hideSelect();} /* Check if box is already open to still allow toggle, but close all other selects */                                                        $ul.slideToggle();                                                        var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);                                                        $ul.animate({scrollTop: offSet});                                                        return false;                                                });        }); /* End Form each */        /* Hide all open selects */        var hideSelect = function(){            $('.jNiceSelectWrapper ul:visible').hide();        };        /* Check for an external click */        var checkExternalClick = function(event) {            if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { hideSelect(); }        };        /* Apply document listener */        $(document).mousedown(checkExternalClick);        /* Add a new handler for the reset action */        var jReset = function(f){            var sel;            $('.jNiceSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});            $('a.jNiceCheckbox, a.jNiceRadio', f).removeClass('jNiceChecked');            $('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jNiceChecked');}});        };        this.bind('reset',function(){var action = function(){jReset(this);}; window.setTimeout(action, 10);});    };/* End the Plugin */    /* Automatically apply to any forms with class jNice */    $(function(){$('form.jNice').jNice();    });})(jQuery);