HTML文本框样式大全!(很实用,转载!)
2012-09-20 19:25
288 查看
输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入框背景色变色: <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='#ffffff'" style="border-width:1px;border-color=black"> 输入字时输入框边框闪烁(边框为小方型): <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);"> 输入字时输入框边框闪烁(边框为虚线): <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"> 自动横向廷伸的输入框: <input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk"> 自动向下廷伸的文本框: <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea> 只有下划线的文本框: <input style="border:0;border-bottom:1 solid black;background:;"> 软件序列号式的输入框: <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"> 软件序列号式的输入框(完整版): <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">
相关文章推荐
- HTML文本框样式大全
- 文本框样式大全
- 各种各样的文本框滚动栏样式代码 滚动栏样式 文本框样式(文本框样式大全)
- html标签缺省(自带)样式大全
- 转载:Matlab中图像函数大全(http://hi.baidu.com/xianshilong/blog/item/cd4f030839b1a438e9248896.html)
- HTML表单样式大全
- HTML 给alert提示框添加样式(转载)
- HTML text样式大全
- 【表格样式】——HTML制作表格大全
- html标签缺省(自带)样式大全
- [HTML]文本框样式
- 转载:C#日期函数所有样式大全
- HTML文本框 圆角显示 样式设置方法
- Html之【Text文本框】综合技巧大全(持续更新中...)
- html标签缺省(自带)样式大全
- 转载:常用正则表达式大全!(例如:匹配中文、匹配html)
- html标签缺省(自带)样式大全
- 文本框样式大全
- HTML给alert添加样式(转载)
- html标签缺省(自带)样式大全