自定义文件上传框

date
Jun 4, 2014
slug
custom-inputfile
status
Published
tags
develop
summary
其实这根本就不值得写出来,只是可能前几步大家都做了,只是最后一步就忽略了。
type
Post
其实这根本就不值得写出来,只是可能前几步大家都做了,只是最后一步就忽略了。
 
notion image
我们在自定义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;
}
notion image
可是这个时候还是有点问题,就是万恶的IE下边。
IE下边的input标签默认都是有光标的,:file也不例外,而且IE下边必须要点击”Browse”或者双击input输入框才会有效果。那么这个时候在IE下就会出现如图的莫名其妙的问题,注意左边的光标,并且还需要双击才会弹出文件选择窗口。
notion image
这个时候如果你把input透明度设置成100显示出来,就会发现原来是这样的。
notion image
所以这个时候,如果是其他标准浏览器,那么设置好input的高宽就搞定了,而IE下边,还必须考虑如何让”Browse”按钮能铺满我们所自定的div样式。这样我们才能实现IE下不出现光标,而且单击弹出文件选择窗口。
这个时候,看似毫无办法,其实我们可以选择增加字体的大小。当字体变成32px的时候,就是这个样子的。
notion image
好了,这样我们就搞定了,将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;
}
 

© Hivan Du 2021