侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

HTML+CSS点击按钮弹出文件选择框的最佳方案

2023-12-14 星期四 / 0 评论 / 0 点赞 / 27 阅读 / 2423 字

网页设计中,对于文件选择框(HTML的file标签),出于美观或者体验等等的原因,我们对他的默认外观并不满意,我们可能希望点击一个按钮直接弹出文件选择框,这个很多人认为很简单,但是由于浏览器兼容的原因

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

广告 广告

评论区