兼容IE、Firefox、Chrome的文件选择input file按钮美化CSS代码

标签：

css代码：

.new-contentarea {
width: 100%;
overflow:hidden;
margin: 0 auto;
position:relative;
}
.new-contentarea label {
width:100%;
height:100%;
display:block;
}
.new-contentarea input[type=file] {
width:188px;
height:60px;
background:#333;
margin: 0 auto;
position:absolute;
right:50%;
margin-right:-94px;
top:0;
right/*\**/:0px\9;
margin-right/*\**/:0px\9;
width/*\**/:10px\9;
opacity:0;
filter:alpha(opacity=0);
z-index:2;
}
a.upload-img{
width:165px;
display: inline-block;
margin-bottom: 10px;
height:57px;
line-height: 57px;
font-size: 20px;
color: #FFFFFF;
background-color: #f38e81;
border-radius: 3px;
text-decoration:none;
cursor:pointer;
}
a.upload-img:hover{
background-color: #ec7e70;
}

.tc{text-align:center;}

HTML内容：

<div class="new-contentarea tc">
<a href="javascript:void(0)" class="upload-img"><label for="upload-file">上传图像</label></a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>

兼容IE、Firefox、Chrome的文件选择input file按钮美化CSS代码

标签：

原文地址：http://www.cnblogs.com/kelly007/p/4601491.html