修改浏览器自带的默认的浏览文件按钮

1.把原来的 input 标签隐藏了,  opcity:0 来处理

2.在input 的父级创建一个div 来覆盖inpu里面的内容, 这个时候我们可以用比较漂亮的图片替换就完成了



附上代码:

css

a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;}
a:hover{background:green;}
input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}


html

<a href="#">
<input type="file" value="浏览" />
</a>