input type=file hack

最新推荐文章于 2021-08-21 02:27:11 发布

清箫

最新推荐文章于 2021-08-21 02:27:11 发布

阅读量2.4k

点赞数

分类专栏： html 文章标签： file input behavior 前端开发 url list

本文链接：https://blog.csdn.net/woxueliuyun/article/details/5612690

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表单中的 input type=”file”在前端开发中经常会用到，但是很悲剧的是 input type=”file”在各个浏览器下表现不统一，样式很难起作用；

在 chrome浏览器下，显示的结果和 sarari是一样的。

如果要和设计一样，有输入框和按钮，则需要使用文本框和按钮替换。

解决方法如下：

1．创建一个文本框和按钮，再创建一个隐藏的 input=file，当点击文本框或按钮时，同时触发 input=file即可。但问题是 Firefox和 Opera不支持 file类型的 input元素的 click方法。因此这个简单方法不行。

2．和 1一样，但是这次是把 file的 opacity设为 0，让它看不见，然后把 z-index改大点放在文本框和按钮的上面，并且长度和大小相同，当点击时看似是点击文本框，其实是 file。剩下的就是javascript的工作了.

清箫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input type=file hack

v/:* {behavior:url(#default#VML);}o/:* {behavior:url(#default#VML);}w/:* {behavior:url(#default#VML);}.shape {behavior:url(#default#VML);} Normal 0 false false
复制链接

扫一扫

专栏目录