CSS code:
. 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 content:
<div class= "New-contentarea TC" >
<a href= "javascript:void (0)" class= "upload-img" ><label for= "Upload-file" > Uploading images </label></a>
<input type= "File" class= "Name=" Upload-file "id=" Upload-file "/>
</div>
Compatible with IE, Firefox, chrome files Choose the input file button to beautify the CSS code