HTML input box style

The background of the input box is transparent:
<Input style = "background: transparent; border: 1px solid # ffffff">
Hover the mouse over the input box, and the background color of the input box changes accordingly:
<INPUTvalue = "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">
When you enter a word, the border of the input box is blinking (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>
<Inputtype = "text" id = "oText" style = "border: 5px dotted red; color: red" onfocus = "borderColor (this ); "onblur =" clearTimeout (oTime); ">
When you enter a word, the border of the input box blinks (the border is a dotted line ):
<Style>
# OText {border: 1 pxdotted # 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">
Input box for automatic horizontal tinting:
<Input type = "text" style = "huerreson: expression (this. width = this. scrollWidth)" value = "abcdefghijk">
Text Box automatically stretched down:
<Textareaname = "content" rows = "6" cols = "80" onpropertychange = "if (this. scrollHeight> 80) this. style. posHeight = this. scrollHeight + 5 "> enter a few carriage returns to try </textarea & gt;
Text Box with only underlines:
<Input style = "border: 0; border-bottom: 1 solid black; background:;">
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>
<Inputname = "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 ">
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>
<Inputname = "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">

 

Author: zdrjlamp