自定义文件上传框

其实这根本就不值得写出来，只是可能前几步大家都做了，只是最后一步就忽略了。 我们在自定义input:file的时候，一般来说都是外边包一层，里边在写一个<input type="file">, 然后将其透明值设置成0,然后再定义外层的样式来达到自定义的目的。

HTML：

<div class="upfileOutWrap">
  <div class="upfileWrap"><input type="file"></div>
  <div class="upfileBG">upload image</div>
</div>

CSS：

.upfileOutWrap { 
  cursor: pointer; 
  width: 199px;  height: 42px; 
  line-height: 42px; 
  position: relative;
}
.upfileWrap{
  width: 100%;  height: 100%; 
  position: absolute; 
  top:-1; left: -1; 
  z-index:2;
}
.upfileWrap input{
  opacity: 0; filter: alpha(opacity=0); 
  cursor: pointer; 
  width: 100%; height: 100%;
  font-size: 32px;
}
.upfileBG{
  width:100%; height:100%; 
  background: url(./images/upload.png) no-repeat; 
  font-size: 14px; 
  color: white; 
  position: absolute; 
  top:-1; left: -1; 
  padding-left:10px; 
  z-index:1;
}

可是这个时候还是有点问题，就是万恶的 IE 下边。

IE 下边的input标签默认都是有光标的，:file也不例外，而且 IE 下边必须要点击”Browse”或者双击input输入框才会有效果。那么这个时候在 IE 下就会出现如图的莫名其妙的问题，注意左边的光标，并且还需要双击才会弹出文件选择窗口。

这个时候如果你把 input 透明度设置成 100 显示出来，就会发现原来是这样的。

所以这个时候，如果是其他标准浏览器，那么设置好 input 的高宽就搞定了，而 IE 下边，还必须考虑如何让”Browse”按钮能铺满我们所自定的 div 样式。这样我们才能实现 IE 下不出现光标，而且单击弹出文件选择窗口。

这个时候，看似毫无办法，其实我们可以选择增加字体的大小。当字体变成32px的时候，就是这个样子的。

好了，这样我们就搞定了，将input:file 继续设置为完全透明。那个可恶的光标不见了，我们也可以实现 IE 下单击。当然，字体到底用多大的，要视你自己定义的视觉效果来看，自己调试吧。

 Final CSS: 

.upfileOutWrap { 
  cursor: pointer; 
  width: 199px;  height: 42px; 
  line-height: 42px; 
  position: relative;
}
.upfileWrap{
  width: 100%;  height: 100%; 
  position: absolute; 
  top:-1; left: -1; 
  z-index:2;
}
.upfileWrap input{
  opacity: 0; filter: alpha(opacity=0); 
  cursor: pointer; 
  width: 100%; height: 100%;
}
.upfileBG{
  width:100%; height:100%; 
  background: url(./images/upload.png) no-repeat; 
  font-size: 14px; 
  color: white; 
  position: absolute; 
  top:-1; left: -1; 
  padding-left:10px; 
  z-index:1;
}