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

输入字时输入框边框闪烁(边框为小方型)：

function borderColor(){

if(self['oText'].style.borderColor=='red'){

self['oText'].style.borderColor = 'yellow';

}else{

self['oText'].style.borderColor = 'red';

}

oTime = setTimeout('borderColor()',400);

}

输入字时输入框边框闪烁(边框为虚线)：

#oText{border:1px dotted #ff0000;ryo:expression_r(ο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)})};

自动横向廷伸的输入框：

自动向下廷伸的文本框：80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试

只有下划线的文本框：

软件序列号式的输入框：

if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();

—————

软件序列号式的输入框(完整版)：

var sn=new Array();

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-height must be equal to height*/

/* padding:8px 0 0 15px;  通过这个调整也可以*/

}

二、文本框中限制输入字符数

在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: 1px solid #ccc;

padding: 7px 0px;

border-radius: 3px;

padding-left:5px;

box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s

}

input:focus{

border-color: #66afe9;

outline: 0;

box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)

}