文本框样式代码

最新推荐文章于 2023-11-20 23:43:52 发布

魔拉宝

最新推荐文章于 2023-11-20 23:43:52 发布

阅读量4.9k

点赞数

分类专栏：特效代码文章标签： input border function class textbox timer

特效代码专栏收录该内容

109 篇文章

订阅专栏

本文介绍多种文本框及输入框的设计方案，包括序列号式输入、自动延展、背景透明等效果，并展示通过HTML与JavaScript实现的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只有下划线的文本框：
<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>

<body>

</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>