一般在做 WEB 开发项目的时候碰到文件上传必不可少，但是因为各家浏览器对于

<input type="file">

标签支持不同所以在各个浏览器下的显示也是不一样的。可能在用户体验方面会形成困扰，今天就给大家介绍一下文件上传按钮的用户自定义样式的实现。

实现原理：

建立两个层，一个层包装 <input type="file"> 以下简称文件按钮层，一个层包装上传文件按钮的自定义样式，以下渐层样式层。设置两个层的大小一致，将文件按钮层设置相对定位 position = relative、z-index = 2，将样式层设置为绝对定位设置 position=absolute、z-index = 1 并且设置 top left 属性使之与文件按钮层重叠。这样就使大小的一样的两个层重叠在了一起，并且文件按钮层在上面。接下来设置文件按钮层为完全透明，便实现了用户自定义样式。

下面给出实现代码，以下代码可以直接拖动至浏览器查看效果，建议使用 chrome 浏览器。IE 浏览器对于 CSS 样式支持不够，不能够显示渐变效果。

代码：

          
            
    		
    		        	
    
  		
     
      
     
  		
     
      点击上传
     
  	
    
  	
  	
    
     在 IE 浏览器下没有渐变效果并且文件上传可能需要双击才能触发效果