不同浏览器input file样式不一样

朴灿烈づ我的快乐病毒、 2022-03-11 13:21 250阅读 0赞

在开发项目过程中会碰到不同浏览器input file样式不一样。

经过分析，打算都用IE上面的附件上传样式，

![5421db63-44e4-3c38-b5bc-a5aecf33311e.png][]  
 方案如下：

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();
    })

[5421db63-44e4-3c38-b5bc-a5aecf33311e.png]: /images/20220311/6915e9a0d5b346cf995e599e816b21af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 input file 设置样式去掉选择文件的样式

原有的input file 样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

痛定思痛。/ 2023年08月17日 16:22/ 0 赞/ 147 阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 16 阅读

相关 input书写css的注意事项标签高度不一样浏览器不兼容

最近发现input标签是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，各浏览器不兼容，Firefox和IE中的高度始终不能一致

一时失言乱红尘/ 2022年08月14日 04:50/ 0 赞/ 219 阅读

相关不同浏览器input file样式不一样

在开发项目过程中会碰到不同浏览器input file样式不一样。经过分析，打算都用IE上面的附件上传样式， ![5421db63-44e4-3c38-b5bc-a5

梦里梦外;/ 2022年06月17日 04:54/ 0 赞/ 152 阅读

相关美化input type="file"的样式

原理：将原来的样式隐藏，然后自己写css和js html部分： <div class="file-input"> <p class="input-container

- 日理万妓/ 2022年06月05日 12:54/ 0 赞/ 262 阅读

相关使用bootstrap默认样式，修改input=file的展现样式

随笔记录一下！使用bootstrap默认的类form-control，使用input=file的时候，展现格式很不友好。我们可以使用三个input来自己拼成一个文件上传

Myth丶恋晨/ 2022年05月29日 09:46/ 0 赞/ 598 阅读

相关不同浏览器input file样式不一样

在开发项目过程中会碰到不同浏览器input file样式不一样。经过分析，打算都用IE上面的附件上传样式， ![5421db63-44e4-3c38-b5bc-a5

缺乏、安全感/ 2022年04月12日 12:08/ 0 赞/ 296 阅读

相关 input[type="file"]样式修改

默认情况下，html中的<input type="file"/>标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按

青旅半醒/ 2022年03月21日 04:52/ 0 赞/ 437 阅读

相关不同浏览器input file样式不一样

在开发项目过程中会碰到不同浏览器input file样式不一样。经过分析，打算都用IE上面的附件上传样式， ![5421db63-44e4-3c38-b5bc-a5

朴灿烈づ我的快乐病毒、/ 2022年03月11日 13:21/ 0 赞/ 251 阅读

相关 margin-left:10px; 不同浏览器距离为什么不一样？

这是一个ie的bug.. 如果你设置margin对象是浮动的。ie就会把你设置的值双倍处理。。可以设置浮动对象的 display:inline 解决转载于:htt

太过爱你忘了你带给我的痛/ 2021年10月20日 00:26/ 0 赞/ 307 阅读