Sample code Sharing for text box styles in CSS

1. Only underlined text boxes:

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

2, the Software serial number type input box:

<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, the Software serial number type input box (full version):

<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, the input frame background transparent:

<input style= "background:transparent;border:1px solid #ffffff" >

5, the mouse across the input box, the input box background color discoloration:

<input value= "Type here" name= "User_pass" type= "text" size= "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, enter the word when the border of the input box flashes (the border is a small square type):

<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. When entering the word, the border of the input box flashes (the border is dashed):

<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, automatic transverse extension of the input box:

<input type= "text" style= "Huerreson:expression (this.width=this.scrollwidth)" value= "Abcdefghijk" >

9. Automatic down-stretched text box:

<textarea name= "Content" rows= "6" cols= "+" onpropertychange= "if (this.scrollheight>80) this.style.posheight= This.scrollheight+5 "> enter several returns to try </textarea>

One, button style

. buttoncss {     font-family: "Tahoma", "Song Body";/*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; }

Two, blue button

. bluebuttoncss {     font-family: "Tahoma", "Song Body";/*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; }

Three, red button

. redbuttoncss {     font-family: "Tahoma", "Song Body";/*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;}

Four, select the button

. selectbuttoncss{     font-family: "Tahoma", "Song Body",/*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;}

Five, green button

. greenbuttoncss {     font-family: "Tahoma", "Song Body";/*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;}

Six, image button

. imagebutton{     Cursor:hand;     /* Change mouse shape  }

Vii. Body of the page

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;}

Eight, drop-down selection box

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;}

Nine, line text edit box

. editbox{     background: #ffffff;     border:1px solid #b7b7b7;     Color: #003366;     Cursor:text;     font-family: "Arial";     font-size:9pt;     height:18px;     padding:1px; /* }

Ten, multiline text box

. 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; /* }

Xi. Shadow Style forms

. 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);}

12. Input box with only one horizontal line

. 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}

13. No Border input box

. 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;}