1、实现效果
实现效果
2、实现思路
（1） 创建丑陋的文件输入框
丑陋的文件输入框
（2）创建美化的DIV
美化后的div
（3）设置丑陋的输入框透明
（4）使用美化后的DIV遮挡默认输入框。
div 的父元素设置为相对定位，div元素使用绝对定位。
半透明效果
3、实现代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传按钮美化</title>
<style type="text/css">
.upload{
width: 100px;
height: 40px;
position: relative;
border:1px solid #ccc;
background:#eee;
color :#fff;
text-shadow : none;
box-shadow :1px 1px 3px rgba(0,0,0,.2)
cursor:pointer;
}
.upload{
width: 84px;
height: 28px;
position: relative;
border:1px solid #00b7ee;
background:#00b7ee
}
.txt {
float: left;
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 28px;
text-align: center;
line-height: 28px;
color : white;
}
.file{
width: 84px;
height: 28px;
opacity:0.0;filter:alpha(opacity=0);
cursor: pointer;
}
</style>
</head>
<body>
<div class="upload">
<div class="txt">上传图片</div>
<input type="file" class="file" value="上传文件">
</div>
</body>
</html>
网友评论