欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

输入框样式总结

程序员文章站 2022-06-25 16:04:17
1、只有下划线的文本框: 2、软件序...

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>

 

 

摘自 爱智旮旯