文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果。

文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

在此就不加图标了

文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

<label class="file-upload">
  <span>上传附件</span>
  <input type="file" name="">
</label>

  在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题。

.file-upload{
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
background:#3AA1F5;
margin-left: 15px;
}
.file-upload input{
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
filter:Alpha(opacity=0);
color: transparent;
width: 100%;
height: 100%;
cursor: pointer;
font-size: 100px;
background:transparent;
}
.file-upload span{
margin: 0 5px;
font-size: 12px;
}

  

上一篇:Linux 统计文件夹下文件个数


下一篇:Linux下架构高可用性网络----HA+LB+lvs