在平常重构中，form表单大家族中的 upload field 在应用 css 清理时让人头疼！默认设置状况下，各个访问器下的主要表现层级不齐！以下图所示，让我等情缘何堪。
一般，大家的设计方案师同学、商品同学都期待文档提交域可以在主要表现上有一定的提升：点一下网页页面中清理过的照片“挑选文档”便可以完善完成文档提交域的作用。唉，理想化很丰腴，实际很骨感！每当我接到这样的规定就会泪如雨下，加照片非常容易，但它没法工作中啊！
好吧，苦逼的前端开发刚开始想方法了：用JS去仿真模拟，貌似这个可行！
可是假如客户禁用脚本制作呢？唉，能否有1个简易的解决方法呢？
历经1番实验，重构组的同学想起1个计划方案，哈哈，纯CSS完成，编码很简易的哦。
计划方案以下：
默认设置状况下，访问器中的芙蓉姐姐（文档提交域）是这个模样的：
清理后呢？哎呦喂，历经重构后的芙蓉洗心革面哦！
好啦，不卖关子了，上编码。
HTML
<FORM><A class=btn_addPic href="javascript:void(0);"><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:⑴9px 0;}
.filePrew {
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 39px;
font-size: 100px; /* 增大不一样访问器的可点一下地区 */
opacity: 0; /* 完成的重要点 */
filter:alpha(opacity=0);/* 适配IE */
}
如今大家看来看访问器中的主要表现是不是1致呢？
给力哦！
近期有盆友意见反馈：在不一样访问器下，文档提交域的可点一下范畴尺寸不1。 对于此难题，大家能够对 input file 设定1个较大的字号 以此做到提升能用性的目地。
可是，新难题来了，不一样访问器下，当电脑鼠标进到可点一下范畴时电脑鼠标的样子（cursor）又不尽相同,就算设定 cursor:pointer; 也无论用！苦逼的前端开发，再次检测吧！