<input_file>美化
2017-02-25 本文已影响37人
程小E
主要思路
在<input_file>标签上套a标签，文字写在<input_file>外a标签内，把<input_file>的设置为透明，绝对定位在a标签上，设置
font-size:100px;是扩大<input_file>的选择范围，相应的a标签需要设置overflow:hidden;等样式
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display:inline-block;
width:100px;
height:40px;
background:red;
position:relative;
overflow:hidden;
text-align: center;
text-decoration: none;
line-height: 40px
}
a:hover{
background:green;
}
input{
position:absolute;
right:0;
top:0;
font-size:100px;
opacity:0;
filter:alpha(opacity=0);
}
</style>
</head>
<body>
<a href="#">
打开文件
<input type="file" value="浏览" />
</a>
</body>
</html>
