您现在的位置: 365建站网 > 365学习 > HTML/css文本框样式美化代码

HTML/css文本框样式美化代码

文章来源:365jz.com     点击数:296    更新时间:2019-06-19 23:15   参与评论

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>


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (296人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------