Nice html Style

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 = "JavaScript">
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_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 box for automatic horizontal loading:
<Input type = "text" style = "huerreson: expression_r (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", "";
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", "";
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", "";
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", "";
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", "";
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;
}

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

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

11. Shadow forms

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

12. display only one X-ray input box

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

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