jQuery表单元素美化插件jqtransformjs代码

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

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

以下是 jQuery表单元素美化插件jqtransformjs代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title>jQuery表单元素美化插件jqtransform</title>
	<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" href="demo.css" type="text/css" media="all" />
	<script type="text/javascript" src="jquery.js" ></script>
	<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
	<script language="javascript">
		$(function(){
			$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
		});
	</script>
	</head>
	<body>
    <form action="zzsc.php" method="POST">
      <div class="rowElem">
        <label>文本输入：</label>
        <input type="text" name="inputtext" placeholder=""/>
      </div>
      <div class="rowElem">
        <label>密码输入：</label>
        <input type="password"  placeholder="13141618.taobao.com"/>
      </div>
      <div class="rowElem">
        <label>复选按钮：</label>
        <input type="checkbox" name="chbox" id="">
      </div>
      <div class="rowElem">
        <label>单选按钮：</label>
        <input type="radio" id="" name="question" value="boy" checked >
        <label>男</label>
        <input type="radio" id="" name="question" value="girl" >
        <label>女</label>
      </div>
      <div class="rowElem">
        <label>富文本框：</label>
        <textarea cols="30" rows="5" name="mytext" placeholder="内容专注于提供免费素材下载,其内容涵盖设计素材,PSD素材,矢量素材,图片素材,图标素材,设计字体等免费素材"></textarea>
      </div>
      <div class="rowElem">
        <label>下拉选框：</label>
        <select name="select">
          <option value="">请选择</option>
          <option value="opt1">内容一</option>
          <option value="opt2">内容二</option>
          <option value="opt3">内容三</option>
          <option value="opt4">内容四</option>
          <option value="opt5">内容五</option>
          <option value="opt6">内容六</option>
        </select>
      </div>
      <div class="rowElem">
        <label>提交按钮：</label>
        <input type="submit" value="提交按钮" />
      </div>
      <div class="rowElem">
        <label>重置按钮：</label>
        <input type="reset" value="重置按钮" />
      </div>
      <div class="rowElem">
        <label>普通按钮：</label>
        <input type="button" value="普通按钮" />
      </div>
    </form>
</body>
</html>

JS代码(jquery.jqtransform.js):

/* * * jqTransform * by mathieu vilaplana mvilaplana@dfc-e.com * www.sucaijiayuan.com * * * Version 1.0 25.09.08 * Version 1.1 06.08.09 * Add event click on Checkbox and Radio * Auto calculate the size of a select element * Can now,disabled the elements * Correct bug in ff if click on select (overflow=hidden) * No need any more preloading !! * ******************************************** */
(function($){
	var defaultOptions ={
	preloadImg:true}
;
	var jqTransformImgPreloaded = false;
	var jqTransformPreloadHoverFocusImg = function(strImgUrl){
	//guillemets to remove for iestrImgUrl = strImgUrl.replace(/^url\((.*)\)/,'$1').replace(/^\"(.*)\"$/,'$1');
	var imgHover = new Image();
	imgHover.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-hover.$1');
	var imgFocus = new Image();
	imgFocus.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-focus.$1');
}
;
	/*************************** Labels***************************/
var jqTransformGetLabel = function(objfield){
	var selfForm = $(objfield.get(0).form);
	var oLabel = objfield.next();
	if(!oLabel.is('label')){
	oLabel = objfield.prev();
	if(oLabel.is('label')){
	var inputname = objfield.attr('id');
	if(inputname){
	oLabel = selfForm.find('label[for="'+inputname+'"]');
}
}
}
if(oLabel.is('label')){
	return oLabel.css('cursor','pointer');
}
return false;
}
;
	/* Hide all open selects */
var jqTransformHideSelect = function(oTarget){
	var ulVisible = $('.jqTransformSelectWrapper ul:visible');
	ulVisible.each(function(){
	var oSelect = $(this).parents(".jqTransformSelectWrapper:first").find("select").get(0);
	//do not hide if click on the label object associated to the selectif( !(oTarget && oSelect.oLabel && oSelect.oLabel.get(0) == oTarget.get(0)) ){
	$(this).hide();
}
}
);
}
;
	/* Check for an external click */
var jqTransformCheckExternalClick = function(event){
	if ($(event.target).parents('.jqTransformSelectWrapper').length === 0){
	jqTransformHideSelect($(event.target));
}
}
;
	/* Apply document listener */
var jqTransformAddDocumentListener = function (){
	$(document).mousedown(jqTransformCheckExternalClick);
}
;
	/* Add a new handler for the reset action */
var jqTransformReset = function(f){
	var sel;
	$('.jqTransformSelectWrapper select',f).each(function(){
	sel = (this.selectedIndex<0) ? 0:this.selectedIndex;
	$('ul',$(this).parent()).each(function(){
	$('a:eq('+ sel +')',this).click();
}
);
}
);
	$('a.jqTransformCheckbox,a.jqTransformRadio',f).removeClass('jqTransformChecked');
	$('input:checkbox,input:radio',f).each(function(){
	if(this.checked){
	$('a',$(this).parent()).addClass('jqTransformChecked');
}
}
);
}
;
	/*************************** Buttons ***************************/
$.fn.jqTransInputButton = function(){
	return this.each(function(){
	var newBtn = $('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +' jqTransformButton"><span><span>'+ $(this).attr('value') +'</span></span>').hover(function(){
	newBtn.addClass('jqTransformButton_hover');
}
,function(){
	newBtn.removeClass('jqTransformButton_hover')}
).mousedown(function(){
	newBtn.addClass('jqTransformButton_click')}
).mouseup(function(){
	newBtn.removeClass('jqTransformButton_click')}
);
	$(this).replaceWith(newBtn);
}
);
}
;
	/*************************** Text Fields ***************************/
$.fn.jqTransInputText = function(){
	return this.each(function(){
	var $input = $(this);
	if($input.hasClass('jqtranformdone') || !$input.is('input')){
	return;
}
$input.addClass('jqtranformdone');
	var oLabel = jqTransformGetLabel($(this));
	oLabel && oLabel.bind('click',function(){
	$input.focus();
}
);
	var inputSize=$input.width();
	if($input.attr('size')){
	inputSize = $input.attr('size')*10;
	$input.css('width',inputSize);
}
$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper"><div class="jqTransformInputInner"><div></div></div></div>');
	var $wrapper = $input.parent().parent().parent();
	$wrapper.css("width",inputSize+10);
	$input.focus(function(){
	$wrapper.addClass("jqTransformInputWrapper_focus");
}
).blur(function(){
	$wrapper.removeClass("jqTransformInputWrapper_focus");
}
).hover(function(){
	$wrapper.addClass("jqTransformInputWrapper_hover");
}
,function(){
	$wrapper.removeClass("jqTransformInputWrapper_hover");
}
);
	/* If this is safari we need to add an extra class */
$.browser.safari && $wrapper.addClass('jqTransformSafari');
	$.browser.safari && $input.css('width',$wrapper.width()+16);
	this.wrapper = $wrapper;
}
);
}
;
	/*************************** Check Boxes ***************************/
$.fn.jqTransCheckBox = function(){
	return this.each(function(){
	if($(this).hasClass('jqTransformHidden')){
	return;
}
var $input = $(this);
	var inputSelf = this;
	//set the click on the labelvar oLabel=jqTransformGetLabel($input);
	oLabel && oLabel.click(function(){
	aLink.trigger('click');
}
);
	var aLink = $('<a href="#" class="jqTransformCheckbox"></a>');
	//wrap and add the link$input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink);
	//on change,change the class of the link$input.change(function(){
	this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
	return true;
}
);
	// Click Handler,trigger the click and change event on the inputaLink.click(function(){
	//do nothing if the original input is disabledif($input.attr('disabled')){
	return false;
}
//trigger the envents on the input object$input.trigger('click').trigger("change");
	return false;
}
);
	// set the default statethis.checked && aLink.addClass('jqTransformChecked');
}
);
}
;
	/*************************** Radio Buttons ***************************/
$.fn.jqTransRadio = function(){
	return this.each(function(){
	if($(this).hasClass('jqTransformHidden')){
	return;
}
var $input = $(this);
	var inputSelf = this;
	oLabel = jqTransformGetLabel($input);
	oLabel && oLabel.click(function(){
	aLink.trigger('click');
}
);
	var aLink = $('<a href="#" class="jqTransformRadio" rel="'+ this.name +'"></a>');
	$input.addClass('jqTransformHidden').wrap('<span class="jqTransformRadioWrapper"></span>').parent().prepend(aLink);
	$input.change(function(){
	inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
	return true;
}
);
	// Click HandleraLink.click(function(){
	if($input.attr('disabled')){
	return false;
}
$input.trigger('click').trigger('change');
	// uncheck all others of same name input radio elements$('input[name="'+$input.attr('name')+'"]',inputSelf.form).not($input).each(function(){
	$(this).attr('type')=='radio' && $(this).trigger('change');
}
);
	return false;
}
);
	// set the default stateinputSelf.checked && aLink.addClass('jqTransformChecked');
}
);
}
;
	/*************************** TextArea ***************************/
$.fn.jqTransTextarea = function(){
	return this.each(function(){
	var textarea = $(this);
	if(textarea.hasClass('jqtransformdone')){
	return;
}
textarea.addClass('jqtransformdone');
	oLabel = jqTransformGetLabel(textarea);
	oLabel && oLabel.click(function(){
	textarea.focus();
}
);
	var strTable = '<table cellspacing="0" cellpadding="0" border="0" class="jqTransformTextarea">';
	strTable +='<tr><td id="jqTransformTextarea-tl"></td><td id="jqTransformTextarea-tm"></td><td id="jqTransformTextarea-tr"></td></tr>';
	strTable +='<tr><td id="jqTransformTextarea-ml">&nbsp;
	</td><td id="jqTransformTextarea-mm"><div></div></td><td id="jqTransformTextarea-mr">&nbsp;
	</td></tr>';
	strTable +='<tr><td id="jqTransformTextarea-bl"></td><td id="jqTransformTextarea-bm"></td><td id="jqTransformTextarea-br"></td></tr>';
	strTable +='</table>';
	var oTable = $(strTable).insertAfter(textarea).hover(function(){
	!oTable.hasClass('jqTransformTextarea-focus') && oTable.addClass('jqTransformTextarea-hover');
}
,function(){
	oTable.removeClass('jqTransformTextarea-hover');
}
);
	textarea.focus(function(){
	oTable.removeClass('jqTransformTextarea-hover').addClass('jqTransformTextarea-focus');
}
).blur(function(){
	oTable.removeClass('jqTransformTextarea-focus');
}
).appendTo($('#jqTransformTextarea-mm div',oTable));
	this.oTable = oTable;
	if($.browser.safari){
	$('#jqTransformTextarea-mm',oTable).addClass('jqTransformSafariTextarea').find('div').css('height',textarea.height()).css('width',textarea.width());
}
}
);
}
;
	/*************************** Select ***************************/
$.fn.jqTransSelect = function(){
	return this.each(function(index){
	var $select = $(this);
	if($select.hasClass('jqTransformHidden')){
	return;
}
if($select.attr('multiple')){
	return;
}
var oLabel = jqTransformGetLabel($select);
	/* First thing we do is Wrap it */
var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
	zIndex:10-index}
);
	/* Now add the html for the select */
$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
	var $ul = $('ul',$wrapper).css('width',$select.width()).hide();
	/* Now we add the options */
$('option',this).each(function(i){
	var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>');
	$ul.append(oLi);
}
);
	/* Add click handler to the a */
$ul.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 default */
$('a:eq('+ this.selectedIndex +')',$ul).click();
	$('span:first',$wrapper).click(function(){
	$("a.jqTransformSelectOpen",$wrapper).trigger('click');
}
);
	oLabel && oLabel.click(function(){
	$("a.jqTransformSelectOpen",$wrapper).trigger('click');
}
);
	this.oLabel = oLabel;
	/* Apply the click handler to the Open */
var oLinkOpen = $('a.jqTransformSelectOpen',$wrapper).click(function(){
	//Check if box is already open to still allow toggle,but close all other selectsif( $ul.css('display') == 'none' ){
	jqTransformHideSelect();
}
if($select.attr('disabled')){
	return false;
}
$ul.slideToggle('fast',function(){
	var offSet = ($('a.selected',$ul).offset().top - $ul.offset().top);
	$ul.animate({
	scrollTop:offSet}
);
}
);
	return false;
}
);
	// Set the new widthvar iSelectWidth = $select.outerWidth();
	var oSpan = $('span:first',$wrapper);
	var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
	$wrapper.css('width',newWidth);
	$ul.css('width',newWidth-2);
	oSpan.css({
	width:iSelectWidth}
);
	// Calculate the height if necessary,less elements that the default height//show the ul to calculate the block,if ul is not displayed li height value is 0$ul.css({
	display:'block',visibility:'hidden'}
);
	var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());
	//+1 else bug ff(iSelectHeight < $ul.height()) && $ul.css({
	height:iSelectHeight,'overflow':'hidden'}
);
	//hidden else bug with ff$ul.css({
	display:'none',visibility:'visible'}
);
}
);
}
;
	$.fn.jqTransform = function(options){
	var opt = $.extend({
}
,defaultOptions,options);
	/* each form */
 return this.each(function(){
	var selfForm = $(this);
	if(selfForm.hasClass('jqtransformdone')){
	return;
}
selfForm.addClass('jqtransformdone');
	$('input:submit,input:reset,input[type="button"]',this).jqTransInputButton();
	$('input:text,input:password',this).jqTransInputText();
	$('input:checkbox',this).jqTransCheckBox();
	$('input:radio',this).jqTransRadio();
	$('textarea',this).jqTransTextarea();
	if( $('select',this).jqTransSelect().length > 0 ){
	jqTransformAddDocumentListener();
}
selfForm.bind('reset',function(){
	var action = function(){
	jqTransformReset(this);
}
;
	window.setTimeout(action,10);
}
);
	//preloading dont needed anymore since normal,focus and hover image are the same one/*if(opt.preloadImg && !jqTransformImgPreloaded){
	jqTransformImgPreloaded = true;
	var oInputText = $('input:text:first',selfForm);
	if(oInputText.length > 0){
	//pour ie on eleve les ""var strWrapperImgUrl = oInputText.get(0).wrapper.css('background-image');
	jqTransformPreloadHoverFocusImg(strWrapperImgUrl);
	var strInnerImgUrl = $('div.jqTransformInputInner',$(oInputText.get(0).wrapper)).css('background-image');
	jqTransformPreloadHoverFocusImg(strInnerImgUrl);
}
var oTextarea = $('textarea',selfForm);
	if(oTextarea.length > 0){
	var oTable = oTextarea.get(0).oTable;
	$('td',oTable).each(function(){
	var strImgBack = $(this).css('background-image');
	jqTransformPreloadHoverFocusImg(strImgBack);
}
);
}
}
*/
}
);
	/* End Form each */
}
;
	/* End the Plugin */
}
)(jQuery);

CSS代码(demo.css):

body{font-family:"Microsoft yahei";font-size:14px;background:#333;}
form{clear:both;display:block;width:298px;margin:100px auto;background:#fff;padding:15px;border-radius:5px;}

CSS代码(jqtransform.css):

form.jqtransformdone label{margin-top:4px;margin-right:8px;display:block;float:left;}
form.jqtransformdone div.rowElem{clear:both;padding:4px 0px;}
/* ------------- * Buttons * ------------- */
button.jqTransformButton{margin:0px;padding:0px;border:none;background-color:transparent;cursor:pointer;overflow:visible;font-family:Arial;}
*:first-child+html button.jqTransformButton[type]{width:1;}
/* IE7 */
button.jqTransformButton span{background:transparent url(img/btn_right.gif) no-repeat right top;display:block;float:left;padding:0px 4px 0px 0px;/* sliding doors padding */
margin:0px;height:33px;}
button.jqTransformButton span span{background:transparent url(img/btn_left.gif) no-repeat top left;color:#333;padding:8px 4px 0px 8px;font-weight:normal;font-size:12px;line-height:13px;display:block;text-decoration:none;height:33px;}
/*hover*/
button.jqTransformButton_hover span span{background-position:left -33px;}
button.jqTransformButton_hover span{background-position:right -33px;}
/*clicked*/
button.jqTransformButton_click span span{background-position:left -66px;}
button.jqTransformButton_click span{background-position:right -66px;}
/* IE 6 */
* html button.jqTransformButton{height:33px;}
* button.jqTransformButton span span{height:25px;}
/* IE 7 */
*+ html button.jqTransformButton{height:33px;}
*+ button.jqTransformButton span span{height:25px;}
/* ------------- * Inputs * ------------- */
.jqTransformInputWrapper{background:transparent url(img/input/input_text_left.gif) no-repeat left top;height:31px;padding:0px;float:left;}
.jqTransformInputInner{background:transparent url(img/input/input_text_right.gif) no-repeat top right;padding:0px;margin:0px;}
.jqTransformInputInner div{height:31px;margin:0px 0px 0px 8px;}
.jqTransformInputInner div input{font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;vertical-align:middle;height:31px;color:#404040;border:none;padding:8px 0px 0px 0px;margin:0px;background:transparent;}
/* IE6 */
* html .jqTransformInputInner div input{padding:6px 0 0 0;margin:0 0 0 -8px;height:24px;}
/* Ie7 */
*+ html .jqTransformInputInner div input{padding:6px 0 0 0;margin-left:-10px;height:24px;}
/*hover*/
.jqTransformInputWrapper_hover{background-position:left -31px;}
.jqTransformInputWrapper_hover div.jqTransformInputInner{background-position:right -31px;}
/*focus*/
.jqTransformInputWrapper_focus{background-position:left -62px;}
.jqTransformInputWrapper_focus div.jqTransformInputInner{background-position:right -62px;}
.jqTransformSafari .jqTransformInputInner div{position:relative;overflow:hidden;margin:0px 8px;}
.jqTransformSafari .jqTransformInputInner div input{background-color:none;position:absolute;top:-12px;left:-2px;height:42px;padding-left:4px;}
/* ------------- * Textarea * ------------- */
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{font-size:12px;line-height:16px;}
table.jqTransformTextarea td{font-size:1px;line-height:1px;width:5px;height:5px;margin:0;padding:0;}
table.jqTransformTextarea{}
table.jqTransformTextarea tr{/*border:1px solid red;*/
}
table.jqTransformTextarea textarea{margin:0;padding:0;border:0;background:none;}
table.jqTransformTextarea td#jqTransformTextarea-tl{background:url(img/textarea/textarea_tl.gif) no-repeat top left;}
table.jqTransformTextarea td#jqTransformTextarea-tm{background:url(img/textarea/textarea_tm.gif) repeat-x top left;}
table.jqTransformTextarea td#jqTransformTextarea-tr{background:url(img/textarea/textarea_tr.gif) no-repeat top left;}
table.jqTransformTextarea td#jqTransformTextarea-ml{background:url(img/textarea/textarea_ml.gif) repeat-y top left;}
table.jqTransformTextarea td#jqTransformTextarea-mm{background:url(img/textarea/textarea-mm.gif) repeat;}
table.jqTransformTextarea td#jqTransformTextarea-mr{background:url(img/textarea/textarea_mr.gif) repeat-y top left;}
table.jqTransformTextarea td#jqTransformTextarea-bl{background:url(img/textarea/textarea_bl.gif) no-repeat top left;}
table.jqTransformTextarea td#jqTransformTextarea-bm{background:url(img/textarea/textarea_bm.gif) repeat-x top left;}
table.jqTransformTextarea td#jqTransformTextarea-br{background:url(img/textarea/textarea_br.gif) no-repeat top left;}
/*hover*/
table.jqTransformTextarea-hover td#jqTransformTextarea-tl{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-tm{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-tr{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-ml{background-position:-5px 0px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-mm{background-image:url(img/textarea/textarea-mm-hover.gif);}
table.jqTransformTextarea-hover td#jqTransformTextarea-mr{background-position:-5px 0px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-bl{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-bm{background-position:0px -5px;}
table.jqTransformTextarea-hover td#jqTransformTextarea-br{background-position:0px -5px;}
/*focus*/
table.jqTransformTextarea-focus td#jqTransformTextarea-tl{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-tm{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-tr{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-ml{background-position:-10px 0px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-mm{background-image:url(img/textarea/textarea-mm-focus.gif);}
table.jqTransformTextarea-focus td#jqTransformTextarea-mr{background-position:-10px 0px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-bl{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-bm{background-position:0px -10px;}
table.jqTransformTextarea-focus td#jqTransformTextarea-br{background-position:0px -10px;}
table.jqTransformTextarea .jqTransformSafariTextarea div{position:relative;overflow:hidden;border:0px solid red;}
table.jqTransformTextarea .jqTransformSafariTextarea textarea{background:none;position:absolute;top:-10px;left:-10px;padding:10px 10px 10px 10px;resize:none;}
/* ------------- * Radios * ------------- */
.jqTransformRadioWrapper{float:left;display:block;margin:0px 4px;margin-top:5px;}
.jqTransformRadio{background:transparent url(img/radio.gif) no-repeat center top;vertical-align:middle;height:19px;width:18px;display:block;/*display:-moz-inline-block;*/
}
/* ------------- * Checkboxes * ------------- */
span.jqTransformCheckboxWrapper{display:block;float:left;margin-top:5px;}
a.jqTransformCheckbox{background:transparent url(img/checkbox.gif) no-repeat center top;vertical-align:middle;height:19px;width:18px;display:block;/*display:-moz-inline-block;*/
}
/* ------------- * Checked - Used for both Radio and Checkbox * ------------- */
a.jqTransformChecked{background-position:center bottom;}
/* ------------- * Selects * ------------- */
.jqTransformSelectWrapper{width:45px;position:relative;height:31px;background:url(img/select_left.gif) no-repeat top left;float:left;}
.jqTransformSelectWrapper div span{font-size:12px;float:none;position:absolute;white-space:nowrap;height:31px;line-height:15px;padding:8px 0 0 7px;overflow:hidden;cursor:pointer;/*border:1px solid #CCCCCC;*/
/*border-right:none;*/
}
.jqTransformSelectWrapper a.jqTransformSelectOpen{display:block;position:absolute;right:0px;width:31px;height:31px;background:url(img/select_right.gif) no-repeat center center;}
.jqTransformSelectWrapper ul{position:absolute;width:43px;top:30px;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:10;}
.jqTransformSelectWrapper ul a{display:block;padding:5px;text-decoration:none;color:#333;background-color:#FFF;font-size:12px;}
.jqTransformSelectWrapper ul a.selected{background:#EDEDED;color:#333;}
.jqTransformSelectWrapper ul a:hover,.jqTransformSelectWrapper ul a.selected:hover{background:#3582c4;color:#fff;}
/* ------------- * Hidden - used to hide the original form elements * ------------- */
.jqTransformHidden{display:none;}

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