HTML/CSS文本框样式美化代码
输入框景背景透明：
鼠标划过输入框，输入框背景色变色：
style="width:106;height:21"οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'"style="border-width:1px;border-color=black">
输入字时输入框边框闪烁(边框为小方型)：
functionborderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor='yellow';
}else{
self['oText'].style.borderColor='red';
}
oTime=setTimeout('borderColor()',400);
}
输入字时输入框边框闪烁(边框为虚线)：
#oText{border:1pxdotted#ff0000;ryo:expression_r(οnfοcus=functionlight(){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
自动横向廷伸的输入框：
自动向下廷伸的文本框：80)this.style.posHeight=this.scrollHeight+5">输入几个回车试试
只有下划线的文本框：
软件序列号式的输入框：
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
—————
软件序列号式的输入框(完整版)：
varsn=newArray();
for(i=0;i
sn=T.value;
alert(sn.join("—"));
—————
一、如何将文本框里的文字垂直居中?
加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height
#text{
height:20px;
vertical-align:middle;
line-height:20px;/*line-heightmustbeequaltoheight*/
/*padding:8px0015px;通过这个调整也可以*/
}
二、文本框中限制输入字符数
在HTML网页中，要想textbox的长度随着输入的字符增多而变长，可以用到CSS的overflow属性。
如下：
请注意要加上合适的maxlength限制，不然的话整个版面将会被撑得很难看。
overflow属性规定当元素里的内容超出显示范围，应该怎样应对。
三、用jQuery改变或清空Text中的值
$("#Text1").val("");
四、限制文本框只能输入【数字】
方法1：输入中，如果出现字母，自动清空！
方法2：离开文本框时，提示：
五、Jquery控制文本框和焦点
$("#Text1").val("公交"); //赋值
$("#Text1").val(""); //清空
var mbt = $("#Text1").val(); // 获取值
$(”#Text1”)[0].focus()// 文本框获得焦点
HTML/css文本框样式美化代码实例：html>
蚂蚁部落
input{
border:1pxsolid#ccc;
padding:7px0px;
border-radius:3px;
padding-left:5px;
box-shadow:inset01px1pxrgba(0,0,0,.075);
transition:border-colorease-in-out.15s,box-shadowease-in-out.15s
}
input:focus{
border-color:#66afe9;
outline:0;
box-shadow:inset01px1pxrgba(0,0,0,.075),008pxrgba(102,175,233,.6)
}
