文本框样式代码
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
軟件序列號(hào)式的輸入框：
<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">
軟件序列號(hào)式的輸入框(完整版)：
<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">
輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠標(biāo)劃過(guò)輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" οnmοuseοver="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?：
<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" οnfοcus="borderColor(this);" οnblur="clearTimeout(oTime);">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)：
<style>
#oText{border:1px dotted #ff0000;ryo:expression(οnfοcus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自動(dòng)橫向廷伸的輸入框：
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">
自動(dòng)向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個(gè)回車(chē)試試</textarea>
?
?
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠標(biāo)經(jīng)過(guò)文本響應(yīng)效果</title>
<style type="text/css">
<!--
body {
?margin-left: 0px;
?margin-top: 0px;
?margin-right: 0px;
?margin-bottom: 0px;
?text-align:center;
}
input{
??? margin:0;
?padding:0;
?border:0;
?}
p{
??? width:400px;
?}
.TextBoxNone
{
?border: none;
?margin-right: 10px;
?background: none;
?cursor: text;
?margin-bottom: 1px;
}
.TextBox
{
?border: none;
?padding: 6px 0 6px 9px;
?font-size: 8pt;
?font-family: Tahoma;
?background-image: url(http://www.i593.com/divcss/kuang/images/textbox_bg.gif);
?background-repeat: no-repeat;
?background-position: left -1px;
?margin:20px auto;
?width:260px;
?text-align:left;
}
.TextBoxFocus
{
?border: none;
?padding: 6px 0 6px 9px;
?font-size: 8pt;
?font-family: Tahoma;
?background-image: url(http://www.i593.com/divcss/kuang/images/textbox_bg.gif);
?background-repeat: no-repeat;
?background-position: left -40px;
?margin:20px auto;
?width:260px;
??? text-align:left;
}
-->
</style></head>
<body>
<h1>鼠標(biāo)經(jīng)過(guò)文本響應(yīng)效果</h1>
<p>很酷的文本框響應(yīng)效果，下面是實(shí)例。代碼很簡(jiǎn)單，原理是用CSS設(shè)置input邊框?yàn)闊o(wú)，然后在為DIV設(shè)置一個(gè)背景作為文本框邊框，為DIV設(shè)置鼠標(biāo)經(jīng)過(guò)和鼠標(biāo)經(jīng)過(guò)兩個(gè)狀態(tài)。當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)更改div背景實(shí)現(xiàn)文本框鼠標(biāo)經(jīng)過(guò)響應(yīng)效果。</p>
<div class="TextBox" οnmοuseοver="this.className='TextBoxFocus'" οnmοuseοut="this.className='TextBox'">
??????????????????????????????????????????? <input name="ctl00$PageContent$tbURL" type="text" size="29" id="ctl00_PageContent_tbURL" class="TextBoxNone" />
???????????????????????????????????????????
??????????????????????????????????????????? <label></label>
??????????????????????????????????????????? <label></label>
??????????????????????????????????????????? <input type="submit" name="Submit" value="提交" />
</div>
</body>
</html>
?
?
?
?
?
?
?
?
<html>?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">?
<title>新建網(wǎng)頁(yè) 1</title>?
<style>?
<!--?
.username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01 1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px }?
-->?
</style>?
</head>?
<body>?
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">?
??? <tr>?
??????? <form name="myform" method="post" action="">?
??????????? <td class="login_td">用戶名：<input class="username" οnmοuseοver="this.style.borderColor='#99E300'" οnmοuseοut="this.style.borderColor='#A1BCA3'" maxLength="12" name="UserName"></td>?
??????? </form>?
??? </tr>?
??? </table>?
</body>?
</html>
?
?
?
?
?
輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
------------------------------------------------------------------------------------------
鼠標(biāo)劃過(guò)輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" οnmοuseοver="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
------------------------------------------------------------------------------------------
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?：
<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" οnfοcus="borderColor(this);" οnblur="clearTimeout(oTime);">
----------------------------------------------------------------------------------------------
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)：
<style>
#oText{border:1px dotted #ff0000;ryo:expression(οnfοcus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
----------------------------------------------------------------------------------------------
自動(dòng)橫向廷伸的輸入框：
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">
----------------------------------------------------------------------------------------------
自動(dòng)向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個(gè)回車(chē)試試</textarea>
----------------------------------------------------------------------------------------------
文本框失效：
<input type="text" disabled>
----------------------------------------------------------------------------------------------
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
----------------------------------------------------------------------------------------------
軟件序列號(hào)式的輸入框：
<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">
軟件序列號(hào)式的輸入框(完整版)：
----------------------------------------------------------------------------------------------
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>發(fā)帖文本框特效</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body{font-size:12px;color:#333;text-align:center;font-family:'宋體',arial,verdana,sans-serif}
ul{list-style:none;}
.p_abs{position:absolute;}
.qhui{color:#9a9a9a;}
#fbcomment{height:152px;text-align:left;width:100%;}
#fbcomment .text{float:left;width:420px;}
#fbcomment .text textarea{width:97%;height:80px;margin-bottom:5px;}
#fbcomment .text .guest{top:5px;left:35px;width:335px;height:72px;background:url(http://img.ku6.com/www/new/img/guest.jpg) no-repeat;}
#fbcomment .text .guest dl{margin:6px 0 5px 40px;line-height:150%;}
-->
</style>
</head>
<body>
<script type="text/javascript" id="KU6_JS_LOADER">
function loadJS(ts){if(!ts){return;}var _2=document.getElementById("KU6_JS_LOADER");for(var i=0;i<ts.length;i++){var _4=ts[i];var _f=false;for(var j=0;j<_2.length;j++){var _s=_2[j].getAttribute("src");if(_s&&_s==_4){_f=true;break;}}if(!_f){document.write("<scr"+"ipt type=/"text/javascript/" src=/""+_4+"/"></scr"+"ipt>");}}}
CSL = ['http://js.ku6.com/common/prototype.js'];
loadJS(CSL);
</script>
<div id="fbcomment">
<div class="text">
<textarea name="comment_txt" id="comment_txt" rows="5" class="b4" onFocus="$('cmt_tipDiv').hide();" title=""? ></textarea>
<div class="guest p_abs qhui" id="cmt_tipDiv" onClick="$('cmt_tipDiv').hide();$('comment_txt').focus();">
<dl>
<dt>藍(lán)旗溫馨提醒：
<dd>1、請(qǐng)勿發(fā)表違反國(guó)家法律評(píng)論，評(píng)論請(qǐng)文明用語(yǔ)；</dd>
<dd>2、禁止發(fā)布廣告評(píng)論。</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
?
?
?
?
?
?
總結(jié)
- 上一篇： 增加XP的IIS连接数，解决403.9连
- 下一篇： 文本框限制输入