css圆角输入框

对应的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Html代码
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4.         <title>Insert title here</title>  
  5.         <style type="text/css">  
  6.             input {   
  7.                 border:0px;   
  8.                 background-image:url(images/long-input.png);   
  9.                 background-repeat:no-repeat;   
  10.                 background-position-x:right;   
  11.                 padding-left:3px;   
  12.                 padding-right:3px;   
  13.                 height:18px;   
  14.                 font-size:11px;   
  15.                 width:70px;   
  16.             }   
  17.         </style>  
  18.     </head>  
  19.     <body>  
  20.         <form>  
  21.             <input value="Hellokitty"/>  
  22.         </form>  
  23.     </body>  
  24. </html>  

 

实现思路如下：

1.使用border:0px;去掉input框默认的边框

2.制作一个圆角的输入框，并设定为input的背景图片并且设定background-repeat:no-repeat;以不让背景图片重复

3.由于是使用固定的背景制作圆角，因此需要设定固定的height:18px;font-size:11px;font-size:11px;

此时的效果图：



 4.发现输入框中的内容压在了左边的背景图片上，因此使用padding-left:3px;使内容有一定的左边距padding-right:3px;同理

此时基本完成整个制作，但在IE下输入字符多的情况下出现:



 也就是说当输入文字过多的时候，背景图片随着左移了，此时设置一个关键字属性background-position-x:right;就可已完成预期的效果了

 

总结：

使用背景图片制作圆角框实现机理简单，但是灵活性不大，因此对于那些需要改变宽高的圆角输入框来说只能制作多张图片，灵活性较差，但是对于不需要改变宽高，大小一致的圆角输入框来说，是一种简单有效的方式。

 

 

注释：直接在input里面设置样式，制作一个与之大小相同的文本框也可以实现，而且更加简单。

<td><input type="text" style="height:35px;width:100%; border: 1px solid #bbb;
border-radius: 10px;" ></td>

posted @ 2014-11-05 16:40  amw863  阅读(5808)  评论(0)  编辑  收藏  举报