先看看显示效果:(虽然有点丑,用图片代替就好看多了)
实现方法:用相对布局,把底图跟浏览重叠,设置input的透明度为0,看似点击了图片,其实是点击了浏览按钮。
代码:
<html> <head> <style> #d { width: 500px; text-align: right; } #d a { background: #ff0000; width: 100px; } #d input { width: 100px; position: relative; left: 100px; filter: alpha(opacity=0); opacity: 0; -moz-opacity:0; } </style> </head> <body> <div id="d"> <input type="file"/> <a href="#">自定义浏览</a> </div> </body> </html>