HTML+CSS点击按钮弹出文件选择框的最佳方案
HTML+CSS点击按钮弹出文件选择框的最佳方案
李玉珏 发表于3年前
HTML+CSS点击按钮弹出文件选择框的最佳方案
  • 发表于 3年前
  • 阅读 9087
  • 收藏 6
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 网页设计中,对于文件选择框(HTML的file标签),出于美观或者体验等等的原因,我们对他的默认外观并不满意,我们可能希望点击一个按钮直接弹出文件选择框,这个很多人认为很简单,但是由于浏览器兼容的原因,并不容易实现,本文将提供一个不使用第三方控件的,兼容主流浏览器的使用纯HTML+CSS实现的优雅方案。

        网页设计中,对于文件选择框(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水平的时候到了。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
李玉珏
粉丝 208
博文 47
码字总数 68847
×
李玉珏
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: