<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(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(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", "宋体"; /*www.52css.com*/ 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", "宋体"; /*www.52css.com*/ 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", "宋体"; /*www.52css.com*/ 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", "宋体"; /*www.52css.com*/ 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", "宋体"; /*www.52css.com*/ 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; /*www.52css.com*/ 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; /*www.52css.com*/ 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; /*www.52css.com*/ 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; /*www.52css.com*/ 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; }
以上就是css中关于文本框样式的示例代码分享的详细内容。