漂亮的表单美化js代码

//Theme Variables - edit these to match your theme
var imagesPath = "img/";
var selectRightWidthSimple = 19;
var selectRightWidthScroll = 2;
var selectMaxHeight = 200;
var textareaTopPadding = 10;
var textareaSidePadding = 10;

//Global Variables
var NF = new Array();
var isIE = false;
var resizeTest = 1;

//Initialization function
function NFInit() {
 try {
  document.execCommand('BackgroundImageCache', false, true);
 } catch(e) {}
 if(!document.getElementById) {return false;}
 //alert("click me first");
 NFDo('start');
}
function NFDo(what) {
 var niceforms = document.getElementsByTagName('form');
 var identifier = new RegExp('(^| )'+'niceform'+'( |$)');
 if (/MSIE (d+.d+);/.test(navigator.userAgent)) {
  var ieversion=new Number(RegExp.$1);
  if(ieversion < 7) {return false;} //exit script if IE6
  isIE = true;
 }
 for(var q = 0; q < niceforms.length; q++) {if(identifier.test(niceforms[q].className)) {
  if(what == "start") { //Load Niceforms
   NF[q] = new niceform(niceforms[q]);
   niceforms[q].start();
  }
  else { //Unload Niceforms
   niceforms[q].unload();
   NF[q] = "";
  }
 }}
}
function NFFix() {
 NFDo('stop');
 NFDo('start');
}
function niceform(nf) {
 nf._inputText = new Array(); nf._inputRadio = new Array(); nf._inputCheck = new Array(); nf._inputSubmit = new Array(); nf._inputFile = new Array(); nf._textarea = new Array(); nf._select = new Array(); nf._multiselect = new Array();
 nf.add_inputText = function(obj) {this._inputText[this._inputText.length] = obj; inputText(obj);}
 nf.add_inputRadio = function(obj) {this._inputRadio[this._inputRadio.length] = obj; inputRadio(obj);}
 nf.add_inputCheck = function(obj) {this._inputCheck[this._inputCheck.length] = obj; inputCheck(obj);}
 nf.add_inputSubmit = function(obj) {this._inputSubmit[this._inputSubmit.length] = obj; inputSubmit(obj);}
 nf.add_inputFile = function(obj) {this._inputFile[this._inputFile.length] = obj; inputFile(obj);}
 nf.add_textarea = function(obj) {this._textarea[this._textarea.length] = obj; textarea(obj);}
 nf.add_select = function(obj) {this._select[this._select.length] = obj; selects(obj);}
 nf.add_multiselect = function(obj) {this._multiselect[this._multiselect.length] = obj; multiSelects(obj);}
 nf.start = function() {
  //Separate and assign elements
  var allInputs = this.getElementsByTagName('input');
  for(var w = 0; w < allInputs.length; w++) {
   switch(allInputs[w].type) {
    case "text": case "password": {this.add_inputText(allInputs[w]); break;}
    case "radio": {this.add_inputRadio(allInputs[w]); break;}
    case "checkbox": {this.add_inputCheck(allInputs[w]); break;}
    case "submit": case "reset": case "button": {this.add_inputSubmit(allInputs[w]); break;}
    case "file": {this.add_inputFile(allInputs[w]); break;}
   }
  }
  var allButtons = this.getElementsByTagName('button');
  for(var w = 0; w < allButtons.length; w++) {
   this.add_inputSubmit(allButtons[w]);
  }
  var allTextareas = this.getElementsByTagName('textarea');
  for(var w = 0; w < allTextareas.length; w++) {
   this.add_textarea(allTextareas[w]);
  }
  var allSelects = this.getElementsByTagName('select');
  for(var w = 0; w < allSelects.length; w++) {
   if(allSelects[w].size == "1") {this.add_select(allSelects[w]);}
   else {this.add_multiselect(allSelects[w]);}
  }
  //Start
  for(w = 0; w < this._inputText.length; w++) {this._inputText[w].init();}
  for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].init();}
  for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].init();}
  for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].init();}
  for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].init();}
  for(w = 0; w < this._textarea.length; w++) {this._textarea[w].init();}
  for(w = 0; w < this._select.length; w++) {this._select[w].init(w);}
  for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].init(w);}
 }
 nf.unload = function() {
  //Stop
  for(w = 0; w < this._inputText.length; w++) {this._inputText[w].unload();}
  for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].unload();}
  for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].unload();}
  for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].unload();}
  for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].unload();}
  for(w = 0; w < this._textarea.length; w++) {this._textarea[w].unload();}
  for(w = 0; w < this._select.length; w++) {this._select[w].unload();}
  for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].unload();}
 }
}
function inputText(el) { //extent Text inputs
 el.oldClassName = el.className;
 el.left = document.createElement('img');
 el.left.src = imagesPath + "0.png";
 el.left.className = "NFTextLeft";
 el.right = document.createElement('img');
 el.right.src = imagesPath + "0.png";
 el.right.className = "NFTextRight";
 el.dummy = document.createElement('div');
 el.dummy.className = "NFTextCenter";
 el.onfocus = function() {
  this.dummy.className = "NFTextCenter NFh";
  this.left.className = "NFTextLeft NFh";
  this.right.className = "NFTextRight NFh";
 }
 el.onblur = function() {
  this.dummy.className = "NFTextCenter";
  this.left.className = "NFTextLeft";
  this.right.className = "NFTextRight";
 }
 el.init = function() {
  this.parentNode.insertBefore(this.left, this);
  this.parentNode.insertBefore(this.right, this.nextSibling);
  this.dummy.appendChild(this);
  this.right.parentNode.insertBefore(this.dummy, this.right);
  this.className = "NFText";
 }
 el.unload = function() {
  this.parentNode.parentNode.appendChild(this);
  this.parentNode.removeChild(this.left);
  this.parentNode.removeChild(this.right);
  this.parentNode.removeChild(this.dummy);
  this.className = this.oldClassName;
 }
}
function inputRadio(el) { //extent Radio buttons
 el.oldClassName = el.className;
 el.dummy = document.createElement('div');
 if(el.checked) {el.dummy.className = "NFRadio NFh";}
 else {el.dummy.className = "NFRadio";}
 el.dummy.ref = el;
 if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}
 else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';}
 el.dummy.onclick = function() {
  if(!this.ref.checked) {
   var siblings = getInputsByName(this.ref.name);
   for(var q = 0; q < siblings.length; q++) {
    siblings[q].checked = false;
    siblings[q].dummy.className = "NFRadio";
   }
   this.ref.checked = true;
   this.className = "NFRadio NFh";
  }
 }
 el.onclick = function() {
  if(this.checked) {
   var siblings = getInputsByName(this.name);
   for(var q = 0; q < siblings.length; q++) {
    siblings[q].dummy.className = "NFRadio";
   }
   this.dummy.className = "NFRadio NFh";
  }
 }
 el.onfocus = function() {this.dummy.className += " NFfocused";}
 el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
 el.init = function() {
  this.parentNode.insertBefore(this.dummy, this);
  el.className = "NFhidden";
 }
 el.unload = function() {
  this.parentNode.removeChild(this.dummy);
  this.className = this.oldClassName;
 }
}
function inputCheck(el) { //extend Checkboxes
 el.oldClassName = el.className;
 el.dummy = document.createElement('img');
 el.dummy.src = imagesPath + "0.png";
 if(el.checked) {el.dummy.className = "NFCheck NFh";}
 else {el.dummy.className = "NFCheck";}
 el.dummy.ref = el;
 if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}
 else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';}
 el.dummy.onclick = function() {
  if(!this.ref.checked) {
   this.ref.checked = true;
   this.className = "NFCheck NFh";
  }
  else {
   this.ref.checked = false;
   this.className = "NFCheck";
  }
 }
 el.onclick = function() {
  if(this.checked) {this.dummy.className = "NFCheck NFh";}
  else {this.dummy.className = "NFCheck";}
 }
 el.onfocus = function() {this.dummy.className += " NFfocused";}
 el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
 el.init = function() {
  this.parentNode.insertBefore(this.dummy, this);
  el.className = "NFhidden";
 }
 el.unload = function() {
  this.parentNode.removeChild(this.dummy);
  this.className = this.oldClassName;
 }
}
function inputSubmit(el) { //extend Buttons
 el.oldClassName = el.className;
 el.left = document.createElement('img');
 el.left.className = "NFButtonLeft";
 el.left.src = imagesPath + "0.png";
 el.right = document.createElement('img');
 el.right.src = imagesPath + "0.png";
 el.right.className = "NFButtonRight";
 el.onmouseover = function() {
  this.className = "NFButton NFh";
  this.left.className = "NFButtonLeft NFh";
  this.right.className = "NFButtonRight NFh";
 }
 el.onmouseout = function() {
  this.className = "NFButton";
  this.left.className = "NFButtonLeft";
  this.right.className = "NFButtonRight";
 }
 el.init = function() {
  this.parentNode.insertBefore(this.left, this);
  this.parentNode.insertBefore(this.right, this.nextSibling);
  this.className = "NFButton";
 }
 el.unload = function() {
  this.parentNode.removeChild(this.left);
  this.parentNode.removeChild(this.right);
  this.className = this.oldClassName;
 }
}
function inputFile(el) { //extend File inputs
 el.oldClassName = el.className;
 el.dummy = document.createElement('div');
 el.dummy.className = "NFFile";
 el.file = document.createElement('div');
 el.file.className = "NFFileNew";
 el.center = document.createElement('div');
 el.center.className = "NFTextCenter";
 el.clone = document.createElement('input');
 el.clone.type = "text";
 el.clone.className = "NFText";
 el.clone.ref = el;
 el.left = document.createElement('img');
 el.left.src = imagesPath + "0.png";
 el.left.className = "NFTextLeft";
 el.button = document.createElement('img');
 el.button.src = imagesPath + "0.png";
 el.button.className = "NFFileButton";
 el.button.ref = el;
 el.button.onclick = function() {this.ref.click();}
 el.init = function() {
  var top = this.parentNode;
  if(this.previousSibling) {var where = this.previousSibling;}
  else {var where = top.childNodes[0];}
  top.insertBefore(this.dummy, where);
  this.dummy.appendChild(this);
  this.center.appendChild(this.clone);
  this.file.appendChild(this.center);
  this.file.insertBefore(this.left, this.center);
  this.file.appendChild(this.button);
  this.dummy.appendChild(this.file);
  this.className = "NFhidden";
  this.relatedElement = this.clone;
 }
 el.unload = function() {
  this.parentNode.parentNode.appendChild(this);
  this.parentNode.removeChild(this.dummy);
  this.className = this.oldClassName;
 }
 el.onchange = el.onmouseout = function() {this.relatedElement.value = this.value;}
 el.onfocus = function() {
  this.left.className = "NFTextLeft NFh";
  this.center.className = "NFTextCenter NFh";
  this.button.className = "NFFileButton NFh";
 }
 el.onblur = function() {
  this.left.className = "NFTextLeft";
  this.center.className = "NFTextCenter";
  this.button.className = "NFFileButton";
 }
 el.onselect = function() {
  this.relatedElement.select();
  this.value = '';
 }
}
function textarea(el) { //extend Textareas
 el.oldClassName = el.className;
 el.height = el.offsetHeight - textareaTopPadding;
 el.width = el.offsetWidth - textareaSidePadding;
 el.topLeft = document.createElement('img');
 el.topLeft.src = imagesPath + "0.png";
 el.topLeft.className = "NFTextareaTopLeft";
 el.topRight = document.createElement('div');
 el.topRight.className = "NFTextareaTop";
 el.bottomLeft = document.createElement('img');
 el.bottomLeft.src = imagesPath + "0.png";
 el.bottomLeft.className = "NFTextareaBottomLeft";
 el.bottomRight = document.createElement('div');
 el.bottomRight.className = "NFTextareaBottom";
 el.left = document.createElement('div');
 el.left.className = "NFTextareaLeft";
 el.right = document.createElement('div');
 el.right.className = "NFTextareaRight";
 el.init = function() {
  var top = this.parentNode;
  if(this.previousSibling) {var where = this.previousSibling;}
  else {var where = top.childNodes[0];}
  top.insertBefore(el.topRight, where);
  top.insertBefore(el.right, where);
  top.insertBefore(el.bottomRight, where);
  this.topRight.appendChild(this.topLeft);
  this.right.appendChild(this.left);
  this.right.appendChild(this);
  this.bottomRight.appendChild(this.bottomLeft);
  el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
  el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
  this.className = "NFTextarea";
 }
 el.unload = function() {
  this.parentNode.parentNode.appendChild(this);
  this.parentNode.removeChild(this.topRight);
  this.parentNode.removeChild(this.bottomRight);
  this.parentNode.removeChild(this.right);
  this.className = this.oldClassName;
  this.style.width = this.style.height = "";
 }
 el.onfocus = function() {
  this.topLeft.className = "NFTextareaTopLeft NFh";
  this.topRight.className = "NFTextareaTop NFhr";
  this.left.className = "NFTextareaLeftH";
  this.right.className = "NFTextareaRightH";
  this.bottomLeft.className = "NFTextareaBottomLeft NFh";
  this.bottomRight.className = "NFTextareaBottom NFhr";
 }
 el.onblur = function() {
  this.topLeft.className = "NFTextareaTopLeft";
  this.topRight.className = "NFTextareaTop";
  this.left.className = "NFTextareaLeft";
  this.right.className = "NFTextareaRight";
  this.bottomLeft.className = "NFTextareaBottomLeft";
  this.bottomRight.className = "NFTextareaBottom";
 }
}
function selects(el) { //extend Selects
 el.oldClassName = el.className;
 el.dummy = document.createElement('div');
 el.dummy.className = "NFSelect";
 el.dummy.style.width = el.offsetWidth + 'px';
 el.dummy.ref = el;
 el.left = document.createElement('img');
 el.left.src = imagesPath + "0.png";
 el.left.className = "NFSelectLeft";
 el.right = document.createElement('div');
 el.right.className = "NFSelectRight";
 el.txt = document.createTextNode(el.options[0].text);
 el.bg = document.createElement('div');
 el.bg.className = "NFSelectTarget";
 el.bg.style.display = "none";
 el.opt = document.createElement('ul');
 el.opt.className = "NFSelectOptions";
 el.dummy.style.left = findPosX(el) + 'px';
 el.dummy.style.top = findPosY(el) + 'px';
 el.opts = new Array(el.options.length);
 el.init = function(pos) {
  this.dummy.appendChild(this.left);
  this.right.appendChild(this.txt);
  this.dummy.appendChild(this.right);
  this.bg.appendChild(this.opt);
  this.dummy.appendChild(this.bg);
  for(var q = 0; q < this.options.length; q++) {
   this.opts[q] = new option(this.options[q], q);
   this.opt.appendChild(this.options[q].li);
   this.options[q].lnk.onclick = function() {
    this._onclick();
    this.ref.dummy.getElementsByTagName('div')[0].innerHTML = this.ref.options[this.pos].text;
    this.ref.options[this.pos].selected = "selected";
    for(var w = 0; w < this.ref.options.length; w++) {this.ref.options[w].lnk.className = "";}
    this.ref.options[this.pos].lnk.className = "NFOptionActive";
   }
  }
  if(this.options.selectedIndex) {
   this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[this.options.selectedIndex].text;
   this.options[this.options.selectedIndex].lnk.className = "NFOptionActive";
  }
  this.dummy.style.zIndex = 999 - pos;
  this.parentNode.insertBefore(this.dummy, this);
  this.className = "NFhidden";
 }
 el.unload = function() {
  this.parentNode.removeChild(this.dummy);
  this.className = this.oldClassName;
 }
 el.dummy.onclick = function() {
  var allDivs = document.getElementsByTagName('div'); for(var q = 0; q < allDivs.length; q++) {if((allDivs[q].className == "NFSelectTarget") && (allDivs[q] != this.ref.bg)) {allDivs[q].style.display = "none";}}
  if(this.ref.bg.style.display == "none") {this.ref.bg.style.display = "block";}
  else {this.ref.bg.style.display = "none";}
  if(this.ref.opt.offsetHeight > selectMaxHeight) {
   this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthScroll + 33 + 'px';
   this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthScroll + 'px';
  }
  else {
   this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthSimple + 33 + 'px';
   this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthSimple + 'px';
  }
 }
 el.bg.onmouseout = function(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
  var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
  if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
  if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
  else{this.style.display = "none";}
 }
 el.dummy.onmouseout = function(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
  var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
  if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
  if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
  else{this.ref.bg.style.display = "none";}
 }
 el.onfocus = function() {this.dummy.className += " NFfocused";}
 el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
 el.onkeydown = function(e) {
  if (!e) var e = window.event;
  var thecode = e.keyCode;
  var active = this.selectedIndex;
  switch(thecode){
   case 40: //down
    if(active < this.options.length - 1) {
     for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
     var newOne = active + 1;
     this.options[newOne].selected = "selected";
     this.options[newOne].lnk.className = "NFOptionActive";
     this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
    }
    return false;
    break;
   case 38: //up
    if(active > 0) {
     for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
     var newOne = active - 1;
     this.options[newOne].selected = "selected";
     this.options[newOne].lnk.className = "NFOptionActive";
     this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
    }
    return false;
    break;
   default:
    break;
  }
 }
}
function multiSelects(el) { //extend Multiple Selects
 el.oldClassName = el.className;
 el.height = el.offsetHeight;
 el.width = el.offsetWidth;
 el.topLeft = document.createElement('img');
 el.topLeft.src = imagesPath + "0.png";
 el.topLeft.className = "NFMultiSelectTopLeft";
 el.topRight = document.createElement('div');
 el.topRight.className = "NFMultiSelectTop";
 el.bottomLeft = document.createElement('img');
 el.bottomLeft.src = imagesPath + "0.png";
 el.bottomLeft.className = "NFMultiSelectBottomLeft";
 el.bottomRight = document.createElement('div');
 el.bottomRight.className = "NFMultiSelectBottom";
 el.left = document.createElement('div');
 el.left.className = "NFMultiSelectLeft";
 el.right = document.createElement('div');
 el.right.className = "NFMultiSelectRight";
 el.init = function() {
  var top = this.parentNode;
  if(this.previousSibling) {var where = this.previousSibling;}
  else {var where = top.childNodes[0];}
  top.insertBefore(el.topRight, where);
  top.insertBefore(el.right, where);
  top.insertBefore(el.bottomRight, where);
  this.topRight.appendChild(this.topLeft);
  this.right.appendChild(this.left);
  this.right.appendChild(this);
  this.bottomRight.appendChild(this.bottomLeft);
  el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
  el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
  el.className = "NFMultiSelect";
 }
 el.unload = function() {
  this.parentNode.parentNode.appendChild(this);
  this.parentNode.removeChild(this.topRight);
  this.parentNode.removeChild(this.bottomRight);
  this.parentNode.removeChild(this.right);
  this.className = this.oldClassName;
  this.style.width = this.style.height = "";
 }
 el.onfocus = function() {
  this.topLeft.className = "NFMultiSelectTopLeft NFh";
  this.topRight.className = "NFMultiSelectTop NFhr";
  this.left.className = "NFMultiSelectLeftH";
  this.right.className = "NFMultiSelectRightH";
  this.bottomLeft.className = "NFMultiSelectBottomLeft NFh";
  this.bottomRight.className = "NFMultiSelectBottom NFhr";
 }
 el.onblur = function() {
  this.topLeft.className = "NFMultiSelectTopLeft";
  this.topRight.className = "NFMultiSelectTop";
  this.left.className = "NFMultiSelectLeft";
  this.right.className = "NFMultiSelectRight";
  this.bottomLeft.className = "NFMultiSelectBottomLeft";
  this.bottomRight.className = "NFMultiSelectBottom";
 }
}
function option(el, no) { //extend Options
 el.li = document.createElement('li');
 el.lnk = document.createElement('a');
 el.lnk.href = "javascript:;";
 el.lnk.ref = el.parentNode;
 el.lnk.pos = no;
 el.lnk._onclick = el.onclick || function () {};
 el.txt = document.createTextNode(el.text);
 el.lnk.appendChild(el.txt);
 el.li.appendChild(el.lnk);
}

//Get Position
function findPosY(obj) {
 var posTop = 0;
 do {posTop += obj.offsetTop;} while (obj = obj.offsetParent);
 return posTop;
}
function findPosX(obj) {
 var posLeft = 0;
 do {posLeft += obj.offsetLeft;} while (obj = obj.offsetParent);
 return posLeft;
}
//Get Siblings
function getInputsByName(name) {
 var inputs = document.getElementsByTagName("input");
 var w = 0; var results = new Array();
 for(var q = 0; q < inputs.length; q++) {if(inputs[q].name == name) {results[w] = inputs[q]; ++w;}}
 return results;
}

//Add events
var existingLoadEvent = window.onload || function () {};
var existingResizeEvent = window.onresize || function() {};
window.onload = function () {
    existingLoadEvent();
    NFInit();
}
window.onresize = function() {
 if(resizeTest != document.documentElement.clientHeight) {
  existingResizeEvent();
  NFFix();
 }
 resizeTest = document.documentElement.clientHeight;
}

/*Defaults Styling*/
body {font:12px/17px Arial, Helvetica, sans-serif; color:#333; background:#ccc; padding:40px 20px 20px 20px;}
fieldset {background:#f2f2e6; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; }
input, textarea, select {font:12px/12px Arial, Helvetica, sans-serif; padding:0;}
fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-20px;}
legend {background:#bfbf30; color:#fff; font:17px/21px Calibri, Arial, Helvetica, sans-serif; padding:0 10px; margin:-26px 0 0 -11px; font-weight:bold; border:1px solid #fff; border-color:#e5e5c3 #505014 #505014 #e5e5c3;}
label {font-size:11px; font-weight:bold; color:#666;}
label.opt {font-weight:normal;}
dl {clear:both;}
dt {float:left; text-align:right; line- margin:0 10px 10px 0;}
dd {float:left; line- margin:0 0 10px 0;}
#footer {font-size:11px;}

#container { margin:0 auto;}

/*##########################################
Script: Niceforms 2.0
Theme: StandardBlue
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/
##########################################*/

/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter { background:url(img/input.png) repeat-x 0 0; padding:3px 0; margin:0; float:left; line-}
.NFTextLeft, .NFTextRight { vertical-align:middle; float:left;}
.NFTextLeft {background:url(img/input-left.png) no-repeat 0 0;}
.NFTextRight {background:url(img/input-right.png) no-repeat 0 0;}
/*Radio*/
.NFRadio {cursor:pointer; position:absolute; display:block; border:1px solid transparent; background:url(img/radio.png) no-repeat 0 0; z-index:2;}
/*Checkbox*/
.NFCheck {cursor:pointer; position:absolute; border:1px solid transparent; background:url(img/checkbox.png) no-repeat 0 0; z-index:2;}
/*Buttons*/
.NFButton {width:auto; color:#fff; padding:0 2px; background:url(img/button.png) repeat-x 0 0; cursor:pointer; border:none; font:10px/26px Tahoma, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:1px; vertical-align:middle;}
.NFButtonLeft, .NFButtonRight { vertical-align:middle;}
.NFButtonLeft {background:url(img/button-left.png) no-repeat 0 0;}
.NFButtonRight {background:url(img/button-right.png) no-repeat 0 0;}
/*Textareas*/
.NFTextarea {border:none; background:none; font:12px/12px Arial, Helvetica, sans-serif; margin:0;}
.NFTextareaTop, .NFTextareaBottom { clear:both; float:none; padding-right:10px;}
.NFTextareaTop {background:url(img/textarea-tr.png) no-repeat 100% 0;}
.NFTextareaBottom {background:url(img/textarea-br.png) no-repeat 100% 0; margin-bottom:5px;}
.NFTextareaTopLeft, .NFTextareaBottomLeft { }
.NFTextareaTopLeft {background:#f2f2e6 url(img/textarea-tl.png) no-repeat 0 0;}
.NFTextareaBottomLeft {background:#f2f2e6 url(img/textarea-bl.png) no-repeat 0 0;}
.NFTextareaLeft, .NFTextareaRight, .NFTextareaLeftH, .NFTextareaRightH {float:left; padding-bottom:5px;}
.NFTextareaLeft, .NFTextareaLeftH {}
.NFTextareaLeft {background:url(img/textarea-l-off.png) repeat-y 0 0;}
.NFTextareaLeftH {background:url(img/textarea-l-over.png) repeat-y 0 0;}
.NFTextareaRight, .NFTextareaRightH {padding-right:5px; padding-bottom:0;}
.NFTextareaRight {background:url(img/textarea-r-off.png) repeat-y 100% 0;}
.NFTextareaRightH {background:url(img/textarea-r-over.png) repeat-y 100% 100%;}
/*Files*/
.NFFileButton {padding-bottom:0; vertical-align:bottom; cursor:pointer; background:url(img/file.png) no-repeat 0 0; }
.NFFile {position:relative; margin-bottom:5px;}
.NFFile input.NFhidden {position:relative; filter:alpha(opacity=0); opacity:0; z-index:2; cursor:pointer; text-align:left;}
.NFFileNew {position:absolute; top:0px; left:0px; z-index:1;}
/*Selects*/
.NFSelect { position:absolute; border:1px solid transparent;}
.NFSelectLeft {float:left; background:url(img/select-left.png) no-repeat 0 0; vertical-align:middle;}
.NFSelectRight { width:auto; background:url(img/select-right.png) no-repeat 100% 0; cursor:pointer; font:12px/21px Arial, Helvetica, sans-serif; color:#fff; padding-left:3px; margin-left:3px;}
.NFSelectTarget {position:absolute; background:none; margin-left:-13px; margin-top:18px; z-index:3; left:0; top:0; padding-bottom:13px;}
.NFSelectOptions {position:relative; background:#707175; margin-left:16px; margin-top:0; list-style:none; padding:4px 0; color:#fff; font:11px/13px Arial, Helvetica, sans-serif; z-index:4; max- overflow-y:auto; overflow-x:hidden; left:0; top:0;}
.NFSelectOptions li {padding-bottom:1px;}
.NFSelectOptions a {display:block; text-decoration:none; color:#fff; padding:2px 3px; background:none;}

• 上一个： javascript下拉框联动效果

• 下一个： js实现动态表单方法