css文本样式:CSS下文本输入框的样式特效来源: 发布时间:星期日, 2008年11月16日 浏览:288次 评论:0
样式表中代码解释如下:
“BORDER-LEFT-STYLE:none”: 隐藏左边框 “BORDER-RIGHT-STYLE: none”: 隐藏右边框 “BORDER-TOP-STYLE: none”: 隐藏上边框 “BORDER-bottom-STYLE: none”: 隐藏下边框。 输入框景背景透明: 程序代码 <input?style="background:transparent;border:1px?solid?#ffffff"> -------------------------------------偶是分割线----------------------------------------------------- 鼠标划过输入框,输入框背景色变色: 程序代码 <INPUT?value="Type?here"?NAME="user_pass"?TYPE="text"?SIZE="29"?? style="width:?106;?height:?21"? ?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"??> --------------------------------------偶是分割线-------------------------------------------------------- 输入字时输入框边框闪烁(边框为虚线): 程序代码 <style> #oText{border:1px?dotted?#ff0000;ryo:expression(?light?(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},(){this.style.borderColor="#ff0000";clearTimeout(timer)})}; </style> <input?type="text"?id="oText"> --------------------------------------偶是分割线-------------------------------------------------------- 自动横向廷伸的输入框: 程序代码 <input?type="text"?style="huerreson:expression(this.width=this.scrollWidth)"?value="abcdefghijk">[code] --------------------------------------偶中分割线-------------------------------------------------------- 自动向下廷伸的文本框: [code]<textarea?name="content"?rows="6"?cols="80"?>输入几个回车试试</textarea> --------------------------------------偶是分割线-------------------------------------------------------- 文本框失效: 程序代码 <input?type="text"?disabled> --------------------------------------偶是分割线-------------------------------------------------------- 只有下划线的文本框: 程序代码 <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"?maxle 0
相关文章读者评论发表评论 |