不同浏览器input file样式不一样
2017-04-17 15:04
369 查看
在开发项目过程中会碰到不同浏览器input file样式不一样。
经过分析,打算都用IE上面的附件上传样式,
方案如下:
1、在IE下截个如上面的上传按钮,并保存。
2、判断浏览器类型,如果是非IE,则将页面上的input 设置为近乎透明,然后将图片放在上面。
不用修改原有代码,渲染时会扫描页面的input file 然后进行样式覆盖。
代码如下
css:
js代码:
大小: 522 Bytes
查看图片附件
经过分析,打算都用IE上面的附件上传样式,
方案如下:
1、在IE下截个如上面的上传按钮,并保存。
2、判断浏览器类型,如果是非IE,则将页面上的input 设置为近乎透明,然后将图片放在上面。
不用修改原有代码,渲染时会扫描页面的input file 然后进行样式覆盖。
代码如下
css:
div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1; } input.file { width: 208px; position: relative; text-align: right; -moz-opacity: 0; filter: alpha(opacity : 0); opacity: 0; z-index: 2; }
js代码:
/** * 附件上传样式自定义,解决不同浏览器附件上传框样式不一样问题 */ function initFileUploads() { if($.browser&&$.browser.msie) return; $("input[type=file]").each(function(){ if($(this).parent().attr("class")!='fileinputs') return; $(this).attr("class","file"); var obj=$("<div class='fakefile'><input ct='file'/><img style='padding-bottom:4px;' src='common/image/upload.png'><div>"); $(this).after(obj); $(this).parent().find("input[ct=file]").width($(this).width()-65); $(this).on("change",function(){ $(($(this).parent().find("input"))[1]).val($(this).val()); }) }); } $(document).ready(function(){ initFileUploads(); })
大小: 522 Bytes
查看图片附件
相关文章推荐
- 解决input的file类型各浏览器的样式兼容
- input file上传文件样式支持html5的浏览器解决方案
- 基本让input 按钮 和 a标签按钮在不同浏览器统一样式
- input标签file类型,去除不同浏览器“未选择文件”字样办法
- 在不同浏览器中获取File Input的路径
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
- 在不同浏览器中获取File Input的路径
- input[name='file'] cursor: pointer 在不同浏览器处理方法
- input、select、textarea兼容不同浏览器样式统一
- input[name='file'] cursor: pointer 在不同浏览器处理方法
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
- 微信页面打开显示的样式与手机浏览器打开显示的样式不一样
- 修改input file文件上传的默认样式 兼容ie8
- 更改input type="file" 的样式
- input file 样式以及获取选择文件方法集合
- CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
- 退出后点击浏览器后退不能回到成功页面;直接进入页面和跳转进入页面样式不同;防止直接输入页面地址或servlet;当servlet跳servlet时,进行其他操作后后退出现错误!
- 自定义<input type="file">样式1