php设置上传文件浏览按钮的样式和文字,文件上传按钮的用户自定义样式的实现...

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

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

实现原理：

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

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

代码：

hidetypebutton.html

.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;}

.user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}

.user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}

.user-file-bg{

width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;

background-color: transparent;

background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));

background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));

background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));

background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));

background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));

border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;

color: #444;

}

点击上传

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