CSS text box styles

1. text box with only underlines: <Input style = "border: 0; border-bottom: 1 solid black; Background:;"> 2. input box of the software serial number type: <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. software serial number 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. Transparent background in the input box: <Input style = "Background: transparent; Border: 1px solid # ffffff"> 5. Hover the mouse over the input box, and the background color of the input box changes accordingly: <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 = '# ffff'" style = "border-width: 1px; border-color = black"> 6. When entering a word, the border of the input box will flash (the border is a small square ): <Script language = "javasOther "> Function bordercolor (){ If (Self ['text']. style. bordercolor = 'red '){ Self ['text']. style. bordercolor = 'yellow '; } Else { Self ['text']. 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 a word, the border of the input box will flash (the border is a dotted line ): <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 box for automatic horizontal loading: <Input type = "text" style = "huerreson: exprEssion (this. width = This. scrollwidth) "value =" abcdefghijk "> 9. Text Box automatically stretched down: <Textarea name = "content" rows = "6" Cols = "80" onPropertychange = "If (this. scrollheight> 80) This. style. posheight = This. scrollheight + 5"> enter a few carriage returns and try </textarea>   I. Button Style . 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; }   2. Blue buttons . 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; }   3. Red Buttons . 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; }   4. select button . 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; } 5. green button . 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; }   6. Image buttons . Imagebutton { Cursor: hand;/* change the Mouse shape www.52css.com */ }   VII. Page body 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; }   8. drop-down 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; }   9. Line text editing box . Editbox { Background: # ffffff; Border: 1px solid # b7b7b7; Color: #003366; Cursor: text; Font-family: "Arial "; Font-size: 9pt; Height: 18px; Padding: 1px;/* www.52css.com */ }   10. Multi-line 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;/* www.52css.com */ }   11. Shadow 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. display only one X-ray input box . 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. input box without Borders . 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; }