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

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

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

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

输入框景背景透明:

</>code

  1. <input style="background:transparent;border:1px solid #ffffff">

 

鼠标划过输入框,输入框背景色变色:

</>code

  1. <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
  2. style="width: 106; height: 21" onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">

 

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

</>code

  1. <Script Language="JavaScript">
  2. function borderColor(){
  3. if(self['oText'].style.borderColor=='red'){
  4. self['oText'].style.borderColor = 'yellow';
  5. }else{
  6. self['oText'].style.borderColor = 'red';
  7. }
  8. oTime = setTimeout('borderColor()',400);
  9. }
  10. </Script>
  11. <input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

 

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

</>code

  1. <style>
  2. #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)})};
  3. </style>
  4. <input type="text" id="oText">

 

自动横向廷伸的输入框:

</>code

  1. <input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

 

自动向下廷伸的文本框:

</>code

  1. <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

 

只有下划线的文本框:

</>code

  1. <input style="border:0;border-bottom:1 solid black;background:;">

 

软件序列号式的输入框:

</>code

  1. <script for="T" event="onkeyup">
  2. if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
  3. </script>
  4. <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">

 

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

</>code

  1. <script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
  2. <script for="T" event="onfocus">select();</script>
  3. <script for="Submit" event="onclick">
  4. var sn=new Array();
  5. for(i=0;i<T.length;i++)
  6. sn=T.value;
  7. alert(sn.join("—"));
  8. </script>
  9. <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">
  10. <input type="submit" name="Submit">

一、如何将文本框里的文字垂直居中?

    加入 verticla-align、line-height 两个属性后,文本框中的文字就在文本框中垂直居中了,要注意的是 line-height 必须要等于 height

</>code

  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4.     #text {  
  5.         height:20px;  
  6.         vertical-align:middle;  
  7.         line-height:20px;  /*line-height must be equal to height*/    
  8.         /* padding:8px 0 0 15px;  通过这个调整也可以*/
  9.     }  
  10. </style>  
  11. </head>  
  12. <body>  
  13.     <table>  
  14.         <input type="text" id="text">  
  15.     </table>  
  16. </body>  
  17. </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文本框样式美化代码实例:

</>code

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="http://www.softwhy.com/" />
  6. <title>蚂蚁部落</title>
  7. <style>
  8. input{
  9.   border: 1px solid #ccc;
  10.   padding: 7px 0px;
  11.   border-radius: 3px;
  12.   padding-left:5px;
  13.   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  14.   transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s             
  15. }             
  16. input:focus{
  17.   border-color: #66afe9;
  18.   outline: 0;
  19.   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)             
  20. }    
  21. </style>    
  22. </head>
  23. <body>
  24.   <input id="text"/>
  25. </body>
  26. </html>


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

发表评论 (2387人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号