自定义文件上传框

其实这根本就不值得写出来,只是可能前几步大家都做了,只是最后一步就忽略了。

我们在自定义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;
}
Share Comments