给上传文件的input控件“美容”

在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。

demo:

  html代码

1 <body>
2     <form action="" method="post" enctype="multipart/form-data">
3         <a href="#" class="a-upload">
4             <input type="file" name="file" id="file">点击这里上传图片</a>
5     </form>
6 </body>

  css代码

 1     <style>
 2     .a-upload {
 3         padding: 4px 10px;
 4         width: 200px;
 5         height: 30px;
 6         box-sizing: border-box;
 7         line-height: 20px;
 8         position: relative;
 9         cursor: pointer;
10         color: #888;
11         background: #fafafa;
12         border: 1px solid #ddd;
13         border-radius: 4px;
14         overflow: hidden;
15         display: inline-block;
16         *display: inline;
17         *zoom: 1;
18         top: 5px;
19     }
20     
21     .a-upload input {
22         position: absolute;
23         font-size: 100px;
24         opacity: 0;
25         filter: alpha(opacity=0);
26         cursor: pointer;
27         width: 200px;
28         height: 30px;
29         left: 0;
30         top: 0;
31     }
32     
33     .a-upload:hover {
34         color: #444;
35         background: #eee;
36         border-color: #ccc;
37         text-decoration: none
38     }
39     </style>

示例下载

posted @ 2017-05-06 13:50  Z&K  阅读(289)  评论(0)  编辑  收藏  举报