jquery自定义表单控件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery自定义表单控件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery自定义表单控件</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="jniceit.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jniceit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('form.NiceIt').NiceIt();
});
</script>

</head>
<body>
    <!-- Page -->
    <div id="page">
    
        <h1>jquery自定义表单控件</h1>

    	<div class="left-column">
    		<h2>Before</h2>
			<form action="#" method="post" class="fm">
				<p>
				    <label for="iemail">Text Input Field: *</label>
				    <input type="text" id="iemail" name="email" value="sc@chinaz.com" title="sc@chinaz.com" />
				</p>

				<div class="ctrls-set">
					<p>
						<input type="radio" name="gender" value="male" id="radio_1" checked="checked" />
						<label for="radio_1">Radio Button 1</label>
					</p>
					<p>
						<input type="radio" name="gender" value="female" id="radio_2" />
						<label for="radio_2">Radio Button 2</label>
					</p>
					<p>
						<input type="radio" name="gender" value="other" id="radio_3" disabled="disabled" />
						<label for="radio_3">Radio Button (disabled)</label>
					</p>
			
					<p>
						<input type="checkbox" name="remember" value="1" id="cbx_1" />
						<label class="align" for="cbx_1">Checkbox</label>
					</p>
			
					<p>
						<input checked="checked" disabled="disabled" type="checkbox" name="i_like_it" value="1" id="cbx_2" />
						<label class="align" for="cbx_2">Checkbox (disabled)</label>
					</p>
				</div>
				
				<p>
				    <label for="impr">Textarea (disabled):</label>
				    <textarea id="impr" name="impressions" cols="5" rows="5" disabled="disabled">The plugin does not use absolute positioning for skinned controls and it is fully compatible with fluid layouts.</textarea>
				</p>
				
				<p>
				    <label for="items">Select box control:</label>
			        <select name="items" id="items">
				        <option value="val_1">Value 1</option>
				        <option value="val_2">Value 2</option>
				        <option value="val_3">Value 3</option>
				        <option value="val_4">Value 4</option>
				        <option value="val_5">Value 5</option>
				        <option value="val_6">Value 6</option>
				        <option value="val_7">Value 7</option>
				        <option value="val_8">Value 8</option>
				        <option value="val_9">Value 9</option>
				        <option value="val_10">Value 10</option>
			        </select>
				</p>
					
				<p>
					<label for="disabled_inp">Input (disabled):</label>
				    <input type="text" name="disabled_inp" id="disabled_inp" value="I can't type there" disabled="disabled" />
				</p>
				
				<p>
				    <label for="ia">File upload field (disabled):</label>
				    <input disabled="disabled" type="file" name="at" title="..." id="ia" />
				</p>
				<p>
				    <label for="details">Textarea:</label>
				    <textarea id="details" name="details" cols="5" rows="5"></textarea>
				</p>
				
				<p>
				    <label for="iattach">File upload field:</label>
				    <input type="file" name="attachment" title="Choose ..." id="iattach" />
					<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
				</p>
				
				<p class="buttons">
					<button type="submit">Submit</button>
					<button type="reset">Reset</button>
					<input type="hidden" name="redirect" value="#" />
				</p>	
				<div class="relax"></div>	
			</form>    		
			<div class="relax"></div>	
    	</div>
    	
    	<div class="right-column">
    		<h2>After</h2>
    		<form action="" method="post" class="fm NiceIt">
				<p>
				    <label for="tiemail">Text Input Field: *</label>
				    <input type="text" id="tiemail" name="email" value="sc@chinaz.com" title="sc@chinaz.com" />
				</p>

				<div class="ctrls-set">
					<p>
						<input type="radio" name="gender" value="male" id="tradio_1" checked="checked" />
						<label for="tradio_1">Radio Button 1</label>
					</p>
					<p>
						<input type="radio" name="gender" value="female" id="tradio_2" />
						<label for="tradio_2">Radio Button 2</label>
					</p>
					<p>
						<input type="radio" name="gender" value="other" id="tradio_3" disabled="disabled" />
						<label for="tradio_3">Radio Button (disabled)</label>
					</p>
			
					<p>
						<input type="checkbox" name="remember" value="1" id="tcbx_1" />
						<label class="align" for="tcbx_1">Checkbox</label>
					</p>
			
					<p>
						<input checked="checked" disabled="disabled" type="checkbox" name="i_like_it" value="1" id="tcbx_2" />
						<label class="align" for="tcbx_2">Checkbox (disabled)</label>
					</p>
				</div>
				
				<p>
				    <label for="timpr">Textarea (disabled):</label>
				    <textarea name="impressions" cols="5" rows="5" id="timpr" disabled="disabled">The plugin does not use absolute positioning for skinned controls and it is fully compatible with fluid layouts.</textarea>
				</p>
				
				<p>
				    <label for="titems">Select Box Control:</label>
			        <select name="items" id="titems">
				        <option value="val_1">Value 1</option>
				        <option value="val_2">Value 2</option>
				        <option value="val_3">Value 3</option>
				        <option value="val_4">Value 4</option>
				        <option value="val_5">Value 5</option>
				        <option value="val_6">Value 6</option>
				        <option value="val_7">Value 7</option>
				        <option value="val_8">Value 8</option>
				        <option value="val_9">Value 9</option>
				        <option value="val_10">Value 10</option>
			        </select>
				</p>
					
				<p>
					<label for="tdisabled_inp">Input (disabled):</label>
				    <input type="text" name="disabled_inp" id="tdisabled_inp" value="I can't type there" disabled="disabled" />
				</p>
				
				<p>
				    <label for="tia">File upload field (disabled):</label>
				    <input disabled="disabled" type="file" name="at" title="..." id="tia" />
				</p>
				<p>
				    <label for="tdetails">Textarea:</label>
				    <textarea id="tdetails" name="details" cols="5" rows="5"></textarea>
				</p>
				
				<p>
				    <label for="tiattach">File upload field:</label>
				    <input type="file" name="attachment" title="..." id="tiattach" />
					<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
				</p>
				
				<p class="buttons">
					<button type="submit">Submit</button>
					<button type="reset">Reset</button>
					<input type="hidden" name="redirect" value="#" />
				</p>		
				<div class="relax"></div>
			</form> 
			<div class="relax"></div>
    	</div>
    	<div class="relax"></div>
    </div>
</body>
</html>

JS代码(jniceit.js):

/** * jQuery NiceIt plugin * * jNiceIt jQuery light-weight plugin which converts boring generic user controls (i.e. text input boxes,textareas,selectboxes,buttons,etc) to a fully customizable controls. * You may use this plugin to emulate any operating system (for example,MacOS,Windows 7) or create your own fantastic UI. * jNiceIt was created with cross-browser functionality in mind and was tested on large forms. * The plugin does not use absolute positioning for skinned controls and is fully compatible with fluid layouts. * * Current version of jNiceIt is a stable release but it does not support theming yet. * You can customize any control by changing one general CSS file only,NO JavaScript modifications are required. * * @name jquery.nice-it.1.0.js * @author ajaxBlender.com - http://www.ajaxBlender.com * @version 1.0 * @date January 13,2010 * @category jQuery plugin * @copyright (c) 2010 ajaxBlender.com * @example Visit http://www.ajaxBlender.com/ for more informations about this jQuery plugin */
(function($){
	/** * $ is an alias to jQuery object * */
$.fn.NiceIt = function(settings){
	settings = jQuery.extend({
	// SettingsVersion:'1.0'}
,settings);
	var jQueryMatchedObj = this;
	// This,in this context,refer to jQuery object/** * Initializing the plugin */
Run(this,jQueryMatchedObj);
	/** * Start the jQuery NiceIt plugin * * @param object objForm The object (form) which the user wants to stylish * @param object jQueryMatchedObj The jQuery object with all elements matched */
function Run(objForm,jQueryMatchedObj){
	for ( var idx = 0;
	idx < jQueryMatchedObj.length;
	idx++ ){
	var form = $(jQueryMatchedObj[idx]);
	if(!$(form).attr('id')){
	$(form).attr('id','fm-' + idx);
}
$(form).setTabIndexes();
	$(form).fnReplaceCheckBoxes();
	$(form).fnReplaceRadioButtons();
	$(form).fnReplaceInputBoxes();
	$(form).fnReplaceSelectBoxes();
	$(form).fnReplaceSelectboxesM();
	$(form).fnReplaceTextareas();
	$(form).fnReplaceButtons();
	$(form).fnReplaceFiles();
}
}
return;
}
;
	/* * Set up tab indexes to all form elements for correct tab navigation */
$.fn.setTabIndexes = function(){
	$(this).find('select,input:not(:hidden),textarea,button').each(function(i,ctrl){
	$(ctrl).attr('tabindex',(i + 1));
}
);
}
/* * Run replacement Checkboxes */
$.fn.fnReplaceCheckBoxes = function(){
	var objForm = this;
	$(objForm).find('input[type="checkbox"]').each(function(i,ctrl){
	$(ctrl).hide();
	var id = 'fmCbx-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = 'fmChbx-' + $(ctrl).attr('id');
}
$(ctrl).after('<b class="fmCheckbox' + ($(ctrl).attr('checked') ? ' checked':'') + '" id="' + id + '">&nbsp;
	</b>');
	var nCtrl = $('#' + id);
	if($(ctrl).attr('disabled')){
	$(nCtrl).addClass('chbx-disabled');
	return;
}
$(ctrl).bind('click',function (){
	if(!$(ctrl).attr('checked')){
	$(nCtrl).removeClass('checked');
}
else{
	$(nCtrl).addClass('checked');
}
}
);
	$(nCtrl).bind('click',function (){
	if($(ctrl).attr('checked')){
	$(ctrl).attr('checked',false);
	$(nCtrl).removeClass('checked');
}
else{
	$(ctrl).attr('checked',true);
	$(nCtrl).addClass('checked');
}
}
);
	/**/
 $('label[for="' + $(ctrl).attr('id') + '"]').bind('click',function (){
	if($(ctrl).attr('checked')){
	$(ctrl).attr('checked',false);
	$(nCtrl).removeClass('checked');
}
else{
	$(ctrl).attr('checked',true);
	$(nCtrl).addClass('checked');
}
}
);
}
);
}
/* * Run replacement of Radio Buttons */
$.fn.fnReplaceRadioButtons = function(){
	var objForm = this;
	$(objForm).find('input[type="radio"]').each(function(i,ctrl){
	$(ctrl).hide();
	var id = 'fmRbtn-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = 'fmRbtn-' + $(ctrl).attr('id');
}
$(ctrl).after('<a rel="' + $(ctrl).attr('name') + '" class="fmRadio' + ($(ctrl).attr('checked') ? ' checked':'') + '" id="' + id + '">&nbsp;
	</a>');
	var nCtrl = $('#' + id);
	if($(ctrl).attr('disabled')){
	$(nCtrl).addClass('rbtn-disabled');
	return;
}
$(ctrl).bind('click',function (){
	$('.fmRadio[rel="' + $(ctrl).attr('name') + '"]').removeClass('checked');
	$(nCtrl).addClass('checked');
}
);
	$(nCtrl).bind('click',function (){
	$('.fmRadio[rel="' + $(nCtrl).attr('rel') + '"]').removeClass('checked');
	$('input[name="' + $(nCtrl).attr('rel') + '"]').attr('checked',false);
	$(this).addClass('checked');
	$(ctrl).attr('checked',true);
	return false;
}
);
}
);
}
/* * Run replacement of Inputs */
$.fn.fnReplaceInputBoxes = function(){
	var objForm = this;
	$(objForm).find('input[type="text"],input[type="password"]').each(function (i,ctrl){
	var width = '50%';
	if($(ctrl).css('width') != 'auto' && $(ctrl).parent().css('width') != 'auto'){
	width = Math.ceil( 100 * parseFloat($(ctrl).css('width')) / parseFloat($(ctrl).parent().css('width')) ) + '%';
}
var id = 'fmInp-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = 'fmInp-' + $(ctrl).attr('id');
}
$(ctrl).width('100%');
	$(ctrl).wrap('<span class="fmInput" id="' + id + '"><span></span></span>');
	var nCtrl = $('#' + id);
	$(nCtrl).width(width);
	if($(ctrl).attr('disabled')){
	$(nCtrl).addClass('disabled');
}
$(nCtrl).swapStyles($(ctrl));
	$(ctrl).bind('focus',function (){
	if($(ctrl).val() == $(ctrl).attr('title')){
	$(ctrl).val('');
}
$(nCtrl).CtrlInFocus();
}
);
	$(ctrl).bind('blur',function (){
	if($(ctrl).val() == ''){
	$(ctrl).val($(ctrl).attr('title'));
}
$(nCtrl).CtrlOutFocus();
}
);
}
);
}
/* * Run replacement of Select Boxes */
$.fn.fnReplaceSelectBoxes = function(){
	var objForm = this;
	var cite = 'strong span cite';
	$(objForm).find('select').each(function (i,ctrl){
	if($(ctrl).attr('multiple')){
	return;
}
var width = '50%';
	if($(ctrl).css('width') != 'auto' && $(ctrl).parent().css('width') != 'auto'){
	width = Math.ceil( 100 * parseFloat($(ctrl).css('width')) / parseFloat($(ctrl).parent().css('width')) ) + '%';
}
var id = 'fmCbox-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = $(ctrl).attr('id');
	$(ctrl).attr('id','');
}
$(ctrl).width('100%');
	var selectedTxt = ($(ctrl).find('option:selected').text() != '' ? $(ctrl).find('option:selected').text():'&nbsp;
	');
	$(ctrl).before('<div class="fmSelect" tabindex="' + $(ctrl).attr('tabindex') + '" id="' + id + '"><strong><span><cite>' + selectedTxt + '</cite></span></strong><ul></ul></div>');
	$(ctrl).attr('tabindex','');
	$(ctrl).hide();
	var nCtrl = $('#' + id);
	$(nCtrl).width(width);
	$(nCtrl).swapStyles($(ctrl));
	/* Define Events */
$(nCtrl).bind('click',function (){
	$(this).find('ul').show();
}
);
	$(nCtrl).bind('mouseleave',function (){
	$(this).find('ul').hide();
}
);
	$(nCtrl).bind('focus',function (){
	$('body').focus();
	$('.fmSelect').css('z-index','100');
	$(nCtrl).css('z-index','1500');
	$(this).CtrlInFocus();
}
);
	$(nCtrl).bind('blur',function (){
	$(this).CtrlOutFocus();
}
);
	$(ctrl).find('option').each(function (idx,item){
	nCtrl.find('ul').append('<li option="' + $(item).attr('value') + '">' + $(item).text() + '</li>');
}
);
	nCtrl.find('li').each(function(num,elem){
	$(elem).bind('mouseenter',function(){
	$(this).addClass('active');
}
);
	$(elem).bind('mouseout',function(){
	$(this).removeClass('active');
}
);
	$(elem).bind('click',function(){
	nCtrl.find(cite).text($(this).text());
	$(ctrl).val($(this).attr('option'));
	nCtrl.find('ul').fadeOut();
}
);
}
);
	nCtrl.bind('keydown',function(event){
	var selected = $(ctrl).find('option:selected');
	$(nCtrl).find('ul').hide();
	if(event.keyCode == 38){
	// Up Keyif(selected.val() != $(ctrl).find('option:first').val()){
	selected.prev().attr('selected',true);
	$(nCtrl).find(cite).text(selected.prev().text());
}
return false;
}
if(event.keyCode == 40){
	// Down Keyif(selected.val() != $(ctrl).find('option:last').val()){
	selected.next().attr('selected',true);
	$(nCtrl).find(cite).text(selected.next().text());
}
return false;
}
if(event.keyCode == 33){
	// PageUp Key$(ctrl).find('option:first').attr('selected',true);
	$(nCtrl).find(cite).text($(ctrl).find('option:first').text());
	return false;
}
if(event.keyCode == 34){
	// PageDown Key$(ctrl).find('option:last').attr('selected',true);
	$(nCtrl).find(cite).text($(ctrl).find('option:last').text());
	return false;
}
}
);
	$(ctrl).bind('change',function(){
	nCtrl.find(cite).text($(this).find('option:selected').text());
}
);
}
);
}
/* * Run replacement of List Boxes */
$.fn.fnReplaceSelectboxesM = function(){
	var objForm = this;
	$(objForm).find('select[multiple]').each(function (i,ctrl){
	var width = '100%';
	var height = $(ctrl).height();
	if($(ctrl).css('width') != 'auto' && $(ctrl).parent().css('width') != 'auto'){
	width = Math.ceil( 100 * parseFloat($(ctrl).css('width')) / parseFloat($(ctrl).parent().css('width')) ) + '%';
}
var id = 'fmMsel-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = $(ctrl).attr('id');
	$(ctrl).attr('id','');
}
$(ctrl).wrap('<span class="fmMultipleSelect" id="' + id + '"><span><span><span></span></span></span></span>');
	var nCtrl = $('#' + id);
	$(nCtrl).width(width);
	$(ctrl).width('96%');
	$(ctrl).height(height);
	/* Define Events */
$(ctrl).bind('focus',function (){
	$(nCtrl).CtrlInFocus();
}
);
	$(ctrl).bind('blur',function (){
	$(nCtrl).CtrlOutFocus();
}
);
}
);
}
/* * Run replacement of Textareas */
$.fn.fnReplaceTextareas = function(){
	var objForm = this;
	$(objForm).find('textarea').each(function (i,ctrl){
	var width = '50%';
	var height = $(ctrl).height();
	if($(ctrl).css('width') != 'auto' && $(ctrl).parent().css('width') != 'auto'){
	width = Math.ceil( 100 * parseFloat($(ctrl).css('width')) / parseFloat($(ctrl).parent().css('width')) ) + '%';
}
var id = 'fmTarea-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = 'fmTarea-' + $(ctrl).attr('id');
}
$(ctrl).wrap('<span class="fmTextarea" id="' + id + '"><span><span><span></span></span></span></span>');
	var nCtrl = $('#' + id);
	$(nCtrl).width(width);
	$(ctrl).height(height);
	if($(ctrl).attr('disabled')){
	$(nCtrl).addClass('tx-disabled');
}
$(ctrl).bind('focus',function (){
	$(nCtrl).CtrlInFocus();
}
);
	$(ctrl).bind('blur',function (){
	$(nCtrl).CtrlOutFocus();
}
);
}
);
}
/* * Run replacement of Buttons */
$.fn.fnReplaceButtons = function(){
	var objForm = this;
	$(objForm).find('button:not(.fmButton)').each(function(i,ctrl){
	$(ctrl).addClass('fmButton');
	if($(ctrl).attr('type').toLowerCase() == 'submit'){
	$(ctrl).wrapInner('<strong><span></span></strong>');
}
else{
	$(ctrl).wrapInner('<span><span></span></span>');
}
$(ctrl).bind('focus',function (){
	$(ctrl).CtrlInFocus();
}
);
	$(ctrl).bind('blur',function (){
	$(ctrl).CtrlOutFocus();
}
);
}
);
}
/* * Run replacement of File Inputs */
$.fn.fnReplaceFiles = function(){
	var objForm = this;
	$(objForm).find('input[type="file"]').each(function (i,ctrl){
	var width = '50%';
	if($(ctrl).css('width') != 'auto' && $(ctrl).parent().css('width') != 'auto'){
	width = Math.ceil( 100 * parseFloat($(ctrl).css('width')) / parseFloat($(ctrl).parent().css('width')) ) + '%';
}
var id = 'fmFinp-' + $(objForm).attr('id') + '-' + (i + 1);
	if($(ctrl).attr('id')){
	id = 'fmFinp-' + $(ctrl).attr('id');
}
$(ctrl).before('<a tabindex="' + $(ctrl).attr('tabindex') + '" class="fnFileInput" id="' + id + '"><span><cite>Not Selected ...</cite><strong>' + ($(ctrl).attr('title') != '' ? $(ctrl).attr('title'):'Browse ...') + '</strong></span></a>');
	$(ctrl).attr('tabindex',0);
	$(ctrl).addClass('fnFileHidden');
	var nCtrl = $('#' + id);
	$(ctrl).appendTo('#' + id + ' span strong');
	$(nCtrl).width(width);
	if($(ctrl).attr('disabled')){
	$(nCtrl).addClass('disabled');
}
/* Define Events */
$(ctrl).bind('change',function (){
	$(nCtrl).find('cite').text($(this).attr('value'));
}
);
	$(nCtrl).bind('focus',function (){
	$(nCtrl).CtrlInFocus();
}
);
	$(nCtrl).bind('blur',function (){
	$(nCtrl).CtrlOutFocus();
}
);
}
);
}
/* * Service functions * */
$.fn.swapStyles = function (objSrc){
	// Apply to newely created control old styles (such as margins)var styles = new Array('margin-left','margin-right','margin-top','margin-bottom');
	$(styles).each(function(idx,property){
	$(this).css(property,$(objSrc).css( property ));
}
);
	$(objSrc).addClass('fmZero');
}
$.fn.CtrlInFocus = function(){
	$(this).addClass('fmInFocus');
}
// Apply fmInFocus class when control get focus$.fn.CtrlOutFocus = function(){
	$(this).removeClass('fmInFocus');
}
// Apply fmInFocus class when control lose focus}
)(jQuery);
	// Call and execute the function immediately passing the jQuery object

CSS代码(jniceit.css):

/*INPUT*/
.fmInput{background:url("./images/jniceit/input-box-left.gif") no-repeat left top;width:100%;float:left;}
.fmInput SPAN{display:block;padding:7px 7px;background:transparent url("./images/jniceit/input-box-right.gif") no-repeat right top;}
.fmInput SPAN INPUT{border:0px;outline:none;width:100%;padding:0 3px;position:relative;z-index:50;color:#777;font-family:Arial,Helvetica,sans-serif;font-size:13px;}
.fmInput.fmInFocus{background-image:url("./images/jniceit/input-box-left-focus.gif");}
.fmInput.fmInFocus SPAN{background-image:url("./images/jniceit/input-box-right-focus.gif");}
.fmInput.fmInFocus SPAN INPUT{background-color:#FBFBFB;}
.fmInput.disabled{background-image:url("./images/jniceit/input-box-left-disabled.gif");}
.fmInput.disabled SPAN{background-image:url("./images/jniceit/input-box-right-disabled.gif");}
.fmInput.disabled SPAN INPUT{background-color:#F0F0F0;}
/*BUTTON*/
.fmButton{background:none;border:none;margin:0;padding:0;float:left;white-space:nowrap;cursor:pointer;width:auto;overflow:visible;}
.fmButton STRONG{background:url("./images/jniceit/button-submit-left.gif") no-repeat left top;float:left;}
.fmButton SPAN{background:url("./images/jniceit/button-left.gif") no-repeat left top;float:left;}
.fmButton STRONG SPAN{background:url("./images/jniceit/button-submit-right.gif") no-repeat right top;padding:8px 15px;float:left;}
.fmButton SPAN SPAN{background:url("./images/jniceit/button-right.gif") no-repeat right top;padding:8px 15px;float:left;font-weight:bold;}
.fmButton:HOVER SPAN{background-position:left -33px;}
.fmButton:HOVER SPAN SPAN{background-position:right -33px;}
.fmButton:HOVER STRONG{background-position:left -33px;}
.fmButton:HOVER STRONG SPAN{background:url("./images/jniceit/button-submit-right.gif") no-repeat right -33px;}
/* CHECKBOX */
B.fmCheckbox{float:left;width:12px;height:12px;background:red;position:relative;cursor:pointer;background:url("./images/jniceit/checkbox.gif") no-repeat left -12px;margin-top:5px;font-size:9px;line-height:1%;text-indent:-1000em;}
B.fmCheckbox.checked{background-position:left top;}
B.fmCheckbox:HOVER{background-position:-12px -12px;}
B.fmCheckbox.checked:HOVER{background-position:-12px top;}
B.fmCheckbox.chbx-disabled{background-position:-24px -12px;}
B.fmCheckbox.checked.chbx-disabled,B.fmCheckbox.checked.chbx-disabled:HOVER{background-position:-24px top;}
/* TEXTAREA */
.fmTextarea{float:left;background:url("./images/jniceit/textarea-tl.gif") no-repeat left top;}
.fmTextarea SPAN{float:left;height:100%;width:100%;background:url("./images/jniceit/textarea-br.gif") no-repeat right bottom;}
.fmTextarea SPAN SPAN{float:left;height:100%;width:100%;background:url("./images/jniceit/textarea-blc.gif") no-repeat left bottom;}
.fmTextarea SPAN SPAN SPAN{float:left;width:100%;//padding-bottom:10px;_padding-bottom:0;background:url("./images/jniceit/textarea-trc.gif") no-repeat right top;}
HTML BODY .fmTextarea TEXTAREA{margin:2%;width:96%;height:96%;background:none;border:none;overflow:auto;outline:none;font-size:13px;color:#777;font-family:Arial,Tahoma,Verdana,sans-serif;max-width:96%;max-height:500px;}
HTML BODY .fmTextarea.fmInFocus,HTML BODY .fmTextarea.fmInFocus TEXTAREA{background-color:#FBFBFB;}
SPAN.fmTextarea.tx-disabled,SPAN.fmTextarea.tx-disabled TEXTAREA{background-color:#F0F0F0;}
/*SELECT BOX*/
.fmSelect{width:40%;float:left;position:relative;outline:none;background:white;z-index:150;}
.fmSelect STRONG{float:left;width:100%;background:url("./images/jniceit/select-box-left.gif") no-repeat left top;cursor:pointer;position:relative;}
.fmSelect STRONG SPAN{display:block;font-size:13px;font-weight:normal;background:url("./images/jniceit/select-box-right.gif") no-repeat right top;}
.fmSelect STRONG SPAN CITE{display:block;padding:7px;white-space:nowrap;overflow:hidden;font-style:normal;margin-right:20px;}
.fmSelect UL{position:absolute;left:0;top:30px;margin:0 !important;padding:0;border:1px solid #AEAFB0;width:100%;list-style:none;font-size:13px;background:white;padding-top:1px;max-height:108px;_height:108px;overflow-y:scroll;z-index:1500;display:none;}
.fmSelect UL LI{display:block;padding:5px 7px;border-bottom:1px solid white;}
.fmSelect UL LI.active{background:#D3E9F6;cursor:pointer;}
/* RADIO BUTTON */
.fmRadio{float:left;width:12px;height:12px;font-size:0;line-height:1%;text-decoration:none;cursor:pointer;background:url("./images/jniceit/radiobutton.gif") no-repeat left -12px;}
.fmRadio.checked{background-position:left top;}
.fmRadio:HOVER{background-position:-12px -12px;text-decoration:none;}
.fmRadio.checked:HOVER{background-position:-12px top;}
.fmRadio.rbtn-disabled,.fmRadio.checked.rbtn-disabled,.fmRadio.rbtn-disabled:HOVER{background-position:-24px -12px;}
/*FILE INPUT*/
.fnFileInput{float:left;background:url("./images/jniceit/file-input-left.gif") no-repeat left top;font-size:15px;cursor:text;text-decoration:none;position:relative;}
.fnFileInput SPAN{float:left;width:100%;height:29px;position:relative;z-index:150;background:url("./images/jniceit/file-input-right.gif") no-repeat right top;}
.fnFileInput SPAN CITE{float:left;margin:6px 7px;display:inline;font-size:13px;width:67%;white-space:nowrap;overflow:hidden;color:#777;cursor:text;}
.fnFileInput SPAN STRONG{float:right;display:inline;border-left:2px solid #CDDFE9;font-family:Arial,Verdana,Tahoma,sans-serif;font-size:14px;font-weight:normal;margin:1px 2px;line-height:195%;overflow:hidden;height:27px;width:22%;color:#000033;white-space:nowrap;text-decoration:none;background:url("./images/jniceit/file-input-button.gif") repeat-x left top;text-align:center;position:relative;z-index:1;max-width:230px;}
A.fnFileInput.fmInFocus{background-image:url("./images/jniceit/file-input-left-focus.gif");}
A.fnFileInput:HOVER SPAN{background-image:url("./images/jniceit/file-input-right-hover.gif");}
A.fnFileInput:HOVER SPAN STRONG{background-image:url("./images/jniceit/file-input-button-hover.gif");border-color:#DCE9F0;}
.fnFileInput.disabled,A.fnFileInput.fmInFocus.disabled{background-image:url("./images/jniceit/file-input-left-disabled.gif");}
A.fnFileInput.disabled:HOVER SPAN STRONG{background-image:url("./images/jniceit/file-input-button.gif");border-left:2px solid #CDDFE9;}
.fnFileHidden{position:absolute;top:0;right:0;z-index:150;height:30px;width:15em !important;filter:alpha(opacity:0);opacity:0;font-size:30px;padding:0 1px;}
/*MULTIPLE SELECT BOX*/
.fmMultipleSelect{float:left;background:url("./images/jniceit/textarea-tl.gif") no-repeat left top;}
.fmMultipleSelect SPAN{float:left;height:100%;width:100%;background:url("./images/jniceit/textarea-br.gif") no-repeat right bottom;}
.fmMultipleSelect SPAN SPAN{float:left;height:100%;width:100%;background:url("./images/jniceit/textarea-blc.gif") no-repeat left bottom;}
.fmMultipleSelect SPAN SPAN SPAN{float:left;width:100%;//padding-bottom:10px;_padding-bottom:0;background:url("./images/jniceit/textarea-trc.gif") no-repeat right top;}
.fmMultipleSelect SELECT{margin:2%;width:96%;height:96%;background:none;padding:0;border:0px;outline:none;font-size:15px;color:#777;font-family:Arial,Tahoma,Verdana,sans-serif;max-width:96%;max-height:500px;}
.fmMultipleSelect SELECT OPTION{padding:3px 7px;margin:0;cursor:pointer;}
.fmMultipleSelect.fmInFocus,.fmMultipleSelect.fmInFocus SELECT{background-color:#FBFBFB;}
/* * */
.fmZero{margin:0 !important;position:relative !important;}
.fmHidden{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)