input(file)样式修改及上传文件名显示

实现思路：
a标签包裹input元素
设置a标签为上传按钮的样式，相对定位
设置input为透明，绝对定位，覆盖到a上面

效果：看到的按钮是a的样式，点击时实际是点击input元素。样式和功能都具备

html代码：

<a href="javascript:;" class="file">选择文件
　　<input type="file" >
</a>

CSS代码：

.file {
position: relative;
display: inline-block;
border: 1px solid #333;
padding: 4px 10px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
border-radius: 5px;
color: #000;
background:#ccc; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #fff, #ccc);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));
background:-o-linear-gradient(top, #fff, #ccc);
}
.file input {
position: absolute;
font-size: 50px;
right: 0;
top: 0;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

效果：



 

此时上传文件的文件名不显示，需要用js处理：

效果: