输入框样式总结

1、只有下划线的文本框：
<input style="border:0;border-bottom:1 solid black;">

2、软件序列号式的输入框：
<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">

3、输入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">

4、鼠标划过输入框，输入框背景色变色：
<input value="type here" name="user_pass" type="text" size="29" onmouver="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">

5、输入字时输入框边框闪烁(边框为小方型)：
<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);">

6、输入字时输入框边框闪烁(边框为虚线)：
<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">

7、自动横向廷伸的输入框：
<input type="text" style="huerreson:expression(this.width=this.scrollwidth)" value="爱智旮旯">

8、自动向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollheight>80) this.style.posheight=this.scrollheight+5">输入几个回车试一试</textarea>

 

 

摘自 爱智旮旯