Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式:
chrome下:

IE8下:

如何修改上传按钮默认风格?IE8和chrome
常用方法:
<label class="file-upload">
<span>上传附件</span>
<input type="file" name="">
</label>
<style>
.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);
filter:progid:DXImageTransform.Microsoft.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;
}
</style>
IE8会出现以下问题:
1、点击某些区域没有反应(部分区域双击可以)
2、有光标显示
解决方法:
可以通过为input设置一个很大的字号将其撑大的方式来解决覆盖问题,这里就设个200px。
(在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题。)
网友评论