一般在做 WEB 开发项目的时候碰到文件上传必不可少，但是因为各家浏览器对于
<input type="file">
标签支持不同所以在各个浏览器下的显示也是不一样的。可能在用户体验方面会形成困扰，今天就给大家介绍一下文件上传按钮的用户自定义样式的实现。
实现原理：
建立两个层，一个层包装 <input type="file"> 以下简称文件按钮层，一个层包装上传文件按钮的自定义样式，以下渐层样式层。设置两个层的大小一致，将文件按钮层设置相对定位 position = relative、z-index = 2，将样式层设置为绝对定位设置 position=absolute、z-index = 1 并且设置 top left 属性使之与文件按钮层重叠。这样就使大小的一样的两个层重叠在了一起，并且文件按钮层在上面。接下来设置文件按钮层为完全透明，便实现了用户自定义样式。
下面给出实现代码，以下代码可以直接拖动至浏览器查看效果，建议使用 chrome 浏览器。IE 浏览器对于CSS 样式支持不够，不能够显示渐变效果。
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>hidetypebutton.html</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6
7 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
8 <!-- 实现 type = "file" 的 input 文件上传按钮的自定义样式-->
9 <style type="text/css">
10 .user-file-outwrap{width: 100px;height: 30px;overflow: hidden;position: relative;border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;}
11 .user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}
12 .user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
13 .user-file-bg{
14 width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;
15 background-color: transparent;
16 background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
17 background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
18 background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));
19 background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
20 background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
21 border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;
22 color: #444;
23 }
24
25
26 </style>
27 </head>
28
29 <body>
30 <div class="user-file-outwrap">
31 <div class="user-file-wrap"><input type="file" class="file"></div>
32 <div class="user-file-bg">点击上传</div>
33 </div>
34 <br/>
35 <div><strong>在 IE 浏览器下没有渐变效果并且文件上传可能需要双击才能触发效果</strong></div>
36 </body>
37 <input type="file">
38 </html>
文件上传按钮的用户自定义样式的实现
时间： 2024-10-13 15:15:55