CSS自定义文件上传按钮样式，兼容主流浏览器

1. [代码][HTML]代码 

1 <div class="box">
2      <input type="text" name="copyFile"  class="textbox" />
3      <a href="javascript:void(0);"  class="link">浏览</a>
4      <input type="file" class="uploadFile" name="upload"
5      onchange="getFile(this,'copyFile')" />
6 </div>

2. [代码][CSS]代码

 1 <style type="text/css">
 2     * {
 3         margin:0;
 4         padding:0;
 5     }
 6     body {
 7         font:14px Verdana, Arial, Geneva, sans-serif;
 8         color:#404040;
 9         background:#fff;
10     }
11     img {
12         border-style:none;
13     }
14     .main{
15         width:300px;
16         height:60px;
17         position:absolute;
18         left:50%;
19         top:50%;
20         margin-left:-150px;
21         margin-top:-30px;
22     }
23     .box{
24         position:relative;
25         float:left;
26     }
27     input.uploadFile{
28         position:absolute;
29         right:0px;
30         top:0px;
31         opacity:0;
32         filter:alpha(opacity=0);
33         cursor:pointer;
34         width:276px;
35         height:36px;
36         overflow: hidden;
37     }
38     input.textbox{
39         float:left;
40         padding:5px;
41         color:#999;
42         height:24px;
43         line-height:24px;
44         border:1px #ccc solid;
45         width:200px;
46         margin-right:4px;
47     }
48     a.link{
49         float:left;
50         display:inline-block;
51         padding:4px 16px;
52         color:#fff;
53         font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
54         cursor:pointer;
55         background-color:#0099ff;
56         line-height:28px;
57         text-decoration:none;
58     }
59 </style>

 

方法二：

1、代码
 
<div class="upload_button">
    +上传图片
    <input type="file" id="idcard_back" name="idcard_back" class="file_button"/>
</div>
 
2、样式
 
.file_button{width:150px;height:30px;line-height:30px;font-size:14px;font-weight:bold;margin:5px;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:-75px;top: 0px;cursor: pointer;margin: 0;padding: 0;}
.upload_button{width:75px;height: 30px;text-align: center;line-height: 30px;background-color: #c5d9ff;border: solid 1px #7faaff;font-size: 12px;display: inline-block;overflow: hidden;position: relative;}
 
效果如图：
posted @ 2016-02-22 18:08  IT小码农  阅读(451)  评论(0)  编辑  收藏  举报