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

Posted 2020-06-15

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>