HTML/css文本框样式美化代码
HTML/css文本框样式美化代码
输入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠标划过输入框，输入框背景色变色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21" onmouseout="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" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
输入字时输入框边框闪烁(边框为虚线)：
<style> #oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})}; </style> <input type="text" id="oText">
自动横向廷伸的输入框：
<input type="text" style="huerreson:expression_r(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 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">
一、如何将文本框里的文字垂直居中?
加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height
<html> <head> <style type="text/css"> #text { height:20px; vertical-align:middle; line-height:20px; /*line-height must be equal to height*/ /* padding:8px 0 0 15px; 通过这个调整也可以*/ } </style> </head> <body> <table> <input type="text" id="text"> </table> </body> </html>
二、文本框中限制输入字符数
在HTML网页中，要想textbox的长度随着输入的字符增多而变长，可以用到CSS的overflow属性。
如下：
<input name="test" type="text" style="overflow:visible" size="10" maxlength="50">
请注意要加上合适的maxlength限制，不然的话整个版面将会被撑得很难看。
overflow属性规定当元素里的内容超出显示范围，应该怎样应对。
三、用Jquery改变或清空Text中的值
$("#Text1").val("");
四、限制文本框只能输入【数字】
方法1：输入中，如果出现字母，自动清空！
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
方法2：离开文本框时，提示：
<input maxlength="2"name="text" id="Text4" class="inputsty1" onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"/>
五、Jquery控制文本框和焦点
$("#Text1").val("公交"); //赋值
$("#Text1").val(""); //清空
var mbt = $("#Text1").val(); // 获取值
$(”#Text1”)[0].focus()// 文本框获得焦点
HTML/css文本框样式美化代码实例：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> 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) } </style> </head> <body> <input id="text"/> </body> </html>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
