當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

文本框样式代码

發布時間：2025/3/21 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了文本框样式代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

只有下劃線的文本框：
<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">

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

鼠標劃過輸入框，輸入框背景色變色：
<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">

輸入字時輸入框邊框閃爍(邊框為小方型)：
<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);">

輸入字時輸入框邊框閃爍(邊框為虛線)：
<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">

自動橫向廷伸的輸入框：
<input type="text" style="huerreson:expression(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>

<!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>鼠標經過文本響應效果</title>
<style type="text/css">

</style></head>
<body>
<h1>鼠標經過文本響應效果</h1>
<p>很酷的文本框響應效果，下面是實例。代碼很簡單，原理是用CSS設置input邊框為無，然后在為DIV設置一個背景作為文本框邊框，為DIV設置鼠標經過和鼠標經過兩個狀態。當鼠標經過時更改div背景實現文本框鼠標經過響應效果。</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>新建網頁 1</title>?
<style>?
?
</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">
------------------------------------------------------------------------------------------
鼠標劃過輸入框，輸入框背景色變色：
<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">
------------------------------------------------------------------------------------------
輸入字時輸入框邊框閃爍(邊框為小方型)：
<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);">
----------------------------------------------------------------------------------------------
輸入字時輸入框邊框閃爍(邊框為虛線)：
<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">
----------------------------------------------------------------------------------------------
自動橫向廷伸的輸入框：
<input type="text" style="huerreson:expression(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 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" 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>發帖文本框特效</title>
<style type="text/css">

</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>藍旗溫馨提醒：
<dd>1、請勿發表違反國家法律評論，評論請文明用語；</dd>
<dd>2、禁止發布廣告評論。</dd>
</dl>
</div>
</div>
</div>
</body>
</html>

總結

以上是生活随笔為你收集整理的文本框样式代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：增加XP的IIS连接数，解决403.9连
下一篇：文本框限制输入