今天小编跟大家讲解下有关CSS美化 input type=file 兼容各个浏览器 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS美化 input type=file 兼容各个浏览器 的相关资料，希望小伙伴们看了有所帮助。
在日常重构中 form表单家族中的 upload field 在使用 css 美化时令人头疼！默认情况下 各个浏览器下的表现层次不齐！如下图所示 让我等情何以堪。
通常 我们的设计师同学、产品同学都希望文件上传域能够在表现上有所突破：点击页面中美化过的图片“选择文件”就可以完美实现文件上传域的功能。唉 理想很丰满 现实很骨感！每当我接到这样的要求就会泪流满面 加图片容易 但它无法工作啊！
好吧 苦逼的前端开始想办法了：用JS去模拟 貌似这个可行！
但是如果用户禁用脚本呢 唉 能否有一个简单的处理方式呢
经过一番试验 重构组的同学想到一个方案 哈哈 纯CSS实现 代码很简单的哦。
方案如下：
默认情况下 浏览器中的芙蓉姐姐（文件上传域）是这个样子的：
美化后呢 哎呦喂 经过重构后的芙蓉脱胎换骨哦！
好啦 不卖关子了 上代码。
HTML 复制代码代码如下:<FORM><A class=btn_addPic href=""><SPAN><EM>+</EM>添加图片</SPAN> <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式 文件小于5M tabIndex=3 type=file size=3 name=pic></A></FORM>
CSS复制代码代码如下:*{margin:0;padding:0;} a{text-decoration:none;} .btn_addPic{ display: block; position: relative; width: 140px; height: 39px; overflow: hidden; border: 1px solid #EBEBEB; background: none repeat scroll 0 0 #F3F3F3; color: #999999; cursor: pointer; text-align: center; } .btn_addPic span{display: block;line-height: 39px;} .btn_addPic em { background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0; display: inline-block; width: 18px; height: 18px; overflow: hidden; margin: 10px 5px 10px 0; line-height: 20em; vertical-align: middle; } .btn_addPic:hover em{background-position:-19px 0;} .filePrew { display: block; position: absolute; top: 0; left: 0; width: 140px; height: 39px; font-size: 100px; opacity: 0; filter:alpha(opacity=0); }
现在我们来看看浏览器中的表现是否一致呢
给力哦！最近有朋友反馈：在不同浏览器下 文件上传域的可点击范围大小不一。 针对此问题 我们可以对 input file 设置一个较大的字号以此达到提高可用性的目的。
但是 新问题来了 不同浏览器下 当鼠标进入可点击范围时鼠标的形状（cursor）又各不相同,即便设置 cursor:pointer; 也不管用！苦逼的前端 继续测试吧！
来源：爱蒂网
