兼容的带样式的INPUT

来源:互联网 发布:营运数据分析怎样写 编辑:程序博客网 时间:2024/05/29 08:02
  1. <style>  
  2. /*  
  3.     作用描述:给INPUT添加美化的样式,兼容IE8,IE9,FF,chrome,safari等  
  4.     效果描述;  
  5.         - 1.边框带圆角  
  6.         - 2.指定INPUT高度  
  7.         - 3.INPUT文本上下居中,添加左边距  
  8.         - 4.背景色为白色  
  9.         - 5.当INPUT获得光标的时候,边框高亮显示天蓝色。  
  10.         - 6.IE7下没有高亮效果  
  11.         - 7.chrome下聚焦后边框是2px。  
  12. */  
  13. .cssInput{  
  14.     border:1px solid #7A6F6F;  
  15.     border:1px solid #7A6F6F \9;/*IE*/  
  16.     width:200px;  
  17.     height:20px;/*非IE高度*/  
  18.     height:20px \9;/*IE高度*/  
  19.     padding-left:5px; /*all*/  
  20.     line-height:20px \9;/*IE*/  
  21.     -moz-border-radius:3px;/*Firefox*/  
  22.     -webkit-border-radius:3px;/*Safari和Chrome*/  
  23.     border-radius:3px;/*IE9+*/  
  24.     background-color:white;  
  25.     outline:none;  
  26. }  
  27. .cssInput:focus{/*IE8+*/  
  28.     border-color:#78BAED;  
  29.     [;outline:1px solid #78BAED;/*chrome*/  
  30. }</style>  
  31.     <input type="text" class="cssInput" id="txt_id" value="我是cssInput的text"><br/><br/>  
  32.       
  33.     <input type="text" id="txt_id" style="width:200px;" value="我是普通的text">