<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input上传按钮美化</title>
<style type="text/css">
/*样式一*/
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom:
}
.a-upload input {
position: absolute;
font-size: 100px;
right: ;
top: ;
opacity: ;
filter: alpha(opacity=);
cursor: pointer
}
.a-upload:hover {
color: #;
background: #eee;
border-color: #ccc;
text-decoration: none
}
/*样式二*/
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: ;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: ;
top: ;
opacity: ;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 样式一 -->
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
<!-- 样式二 -->
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>
</body>
</html>
