HTML+CSS点击按钮弹出文件选择框的最佳方案
浏览数：61 /
时间：2015年06月09日
网页设计中，对于文件选择框（HTML的file标签），出于美观或者体验等等的原因，我们对他的默认外观并不满意，我们可能希望点击一个按钮直接弹出文件选择框，这个很多人认为很简单，但是由于浏览器兼容的原因，主要是在IE8中，不允许调用隐藏file标签的click方法，这个并不容易实现。
很多人会考虑使用flash控件或者ActiveX控件，这个方法功能上没问题，但是对客户机的环境有依赖，并不完美。
经过仔细研究和试验，找到了一个看上去比较完美的设计方案，基本上不存在浏览器兼容问题。基本设计思路就是，用一个定宽定高、不能滚动、透明的DIV，包裹一个非常大的file标签，file标签的font-size具体数值可以灵活设定，主要是保证DIV的可见范围内的下面，完全是file标签的浏览按钮即可，剩下的外观就是开发者自由发挥了，最后只要保证定宽定高的DIV和用户可见的点击区域的外观完全吻合即可。
下面上样例代码：
<li style=‘display: inline‘> <a href="#"><i>上传资料</i> <div style="filter:alpha(opacity=0);cursor: pointer; opacity: 0; position: absolute; width: 75px;margin: -18px 0 0 -6px ;margin: -16px 0 0 -6px\9;height:20px\9;overflow: hidden; "> <input type="file" onchange="uploadFile()" name="upload" style="font-size: 200px;cursor: pointer;direction: rtl ！important; float: right\9; "/> </div> </a> </li>
如果将上述代码片断直接拷贝运行，可能有问题，因为已经把我们的实际样式去掉了，只剩下了精华，理解了设计思路的开发者，考验你CSS水平的时候到了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
