做网页少不了需要美化页面 现收集一套表单样式

　　1、只有下划线的文本框：

　　<input style="border:0;border-bottom:1 solid black;background:;">

　　2、软件序列号式的输入框： 　　<script for="T" event="onkeyup"> 　　if(value.length==3)document.all[event.srcElement.sourceIndex+1].select(); 　　</script> 　　<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

　　3、软件序列号式的输入框(完整版)： 　　<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script> 　　<script for="T" event="onfocus">select();</script> 　　<script for="Submit" event="onclick"> 　　var sn=new Array(); 　　for(i=0;i<T.length;i++) 　　sn=T.value; 　　alert(sn.join("—")); 　　</script> 　　<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3"> 　　<input type="submit" name="Submit">

　　4、输入框景背景透明： 　　<input style="background:transparent;border:1px solid #ffffff">

　　5、鼠标划过输入框，输入框背景色变色： 　    <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'" 　　style="width: 106; height: 21" 　　onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">

　　6、输入字时输入框边框闪烁(边框为小方型)： 　　<Script Language="JavaScript"> 　　function borderColor(){ 　　if(self['oText'].style.borderColor=='red'){ 　　self['oText'].style.borderColor = 'yellow'; 　　}else{ 　　self['oText'].style.borderColor = 'red'; 　　} 　　oTime = setTimeout('borderColor()',400); 　　} 　　</Script> 　　<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

　　7、输入字时输入框边框闪烁(边框为虚线)： 　　<style> 　　#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})}; 　　</style> 　　<input type="text" id="oText">

　　8、自动横向廷伸的输入框： 　　<input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

　　9、自动向下廷伸的文本框： 　    <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

　　一、按钮样式

　   .buttoncss { 　　font-family: "tahoma", "宋体"; 　　font-size:9pt; color: #003399; 　　border: 1px #003399 solid; 　　color:#006699; 　　border-bottom: #93bee2 1px solid; 　　border-left: #93bee2 1px solid; 　　border-right: #93bee2 1px solid; 　　border-top: #93bee2 1px solid; 　　background-image:url(../images/bluebuttonbg.gif); 　　background-color: #e8f4ff; 　　cursor: hand; 　　font-style: normal ; 　　width:60px; 　　height:22px; 　　}

　　二、蓝色按钮

   　.bluebuttoncss { 　　font-family: "tahoma", "宋体"; 　　font-size: 9pt; color: #003366; 　　border: 0px #93bee2 solid; 　　border-bottom: #93bee2 1px solid; 　　border-left: #93bee2 1px solid; 　　border-right: #93bee2 1px solid; 　　border-top: #93bee2 1px solid;*/ 　　background-image:url(../images/blue_button_bg.gif); 　　background-color: #ffffff; 　　cursor: hand; 　　font-style: normal ; 　　}

　　三、红色按钮

   　.redbuttoncss { 　　font-family: "tahoma", "宋体"; 　　font-size: 9pt; color: #0066cc; 　　border: 1px #93bee2 solid; 　　border-bottom: #93bee2 1px solid; 　　border-left: #93bee2 1px solid; 　　border-right: #93bee2 1px solid; 　　border-top: #93bee2 1px solid; 　　background-image:url(../images/redbuttonbg.gif); 　　background-color: #ffffff; 　　cursor: hand; 　　font-style: normal ; 　　}

　　四、选择按钮

  　.selectbuttoncss{ 　　font-family: "tahoma", "宋体"; 　　font-size: 9pt; color: #0066cc; 　　border: 1px #93bee2 solid; 　　border-bottom: #93bee2 1px solid; 　　border-left: #93bee2 1px solid; 　　border-right: #93bee2 1px solid; 　　border-top: #93bee2 1px solid; 　　background-image:url(../images/blue_button_bg.gif); 　　background-color: #ffffff; 　　cursor: hand; 　　font-style: normal ; 　　}　　  　　五、绿色按钮 　　.greenbuttoncss { 　　font-family: "tahoma", "宋体"; 　　font-size: 9pt; color: #0066cc; 　　border: 1px #93bee2 solid; 　　border-bottom: #93bee2 1px solid; 　　border-left: #93bee2 1px solid; 　　border-right: #93bee2 1px solid; 　　border-top: #93bee2 1px solid; 　　background-image:url(../images/greenbuttonbg.gif); 　　background-color: #ffffff; 　　cursor: hand; 　　font-style: normal ; 　　}

　　六、图像按钮

　    .imagebutton{ 　　cursor: hand; 　　}

　　七、页面正文

　    body { 　　scrollbar-face-color: #ededf3; 　　scrollbar-highlight-color: #ffffff; 　　scrollbar-shadow-color: #93949f; 　　scrollbar-3dlight-color: #ededf3; 　　scrollbar-arrow-color: #082468; 　　scrollbar-track-color: #f7f7f9; 　　scrollbar-darkshadow-color: #ededf3; 　　font-size: 9pt; 　　color: #003366; 　　overflow:auto; 　　} 　　td { font-size: 12px } 　　th { 　　font-size: 12px; 　　}

　　八、下拉选择框 　　select{ 　　border-right: #000000 1px solid; 　　border-top: #ffffff 1px solid; 　　font-size: 12px; 　　border-left: #ffffff 1px solid; 　　color:#003366; 　　border-bottom: #000000 1px solid; 　　background-color: #f4f4f4; 　　}

　　九、线条文本编辑框 　　.editbox{ 　　background: #ffffff; 　　border: 1px solid #b7b7b7; 　　color: #003366; 　　cursor: text; 　　font-family: "arial"; 　　font-size: 9pt; 　　height: 18px; 　　padding: 1px; 　　}

　　十、多行文本框

　　.multieditbox{ 　　background: #f8f8f8; 　　border-bottom: #b7b7b7 1px solid; 　　border-left: #b7b7b7 1px solid; 　　border-right: #b7b7b7 1px solid; 　　border-top: #b7b7b7 1px solid; 　　color: #000000; 　　cursor: text; 　　font-family: "arial"; 　　font-size: 9pt; 　　padding: 1px; 　　}

　　十一、阴影风格的表单

　    .shadow { 　　position:absolute; 　　z-index:1000; 　　top:0px; 　　left:0px; 　　background:gray; 　　background-color:#ffcc00; 　　filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true); 　　}

　　十二、只显一条横线的输入框

  　.logintxt{ 　　border-right: #ffffff 0px solid; 　　border-top: #ffffff 0px solid; 　　font-size: 9pt; 　　border-left: #ffffff 0px solid; 　　border-bottom: #c0c0c0 1px solid; 　　background-color: #ffffff 　　}

　　十三、没有边框的输入框    　.noneinput{ 　　text-align:center; 　　width:99%;height:99%; 　　border-top-style: none; 　　border-right-style: none; 　　border-left-style: none; 　　background-color: #f6f6f6; 　　border-bottom-style: none; 　　}