本文介绍了一种使用纯CSS实现自定义文件上传按钮的方法。通过巧妙地设置输入框的样式和位置，可以隐藏默认的文件选择按钮，并用自定义的设计元素替代。这种方法适用于希望统一界面风格或满足特殊设计需求的项目。
本来file按钮时不能用纯CSS去改变样式的，于是在各个帖子上翻阅了半天。终于解决了
Example:
<html>
<head>
<title>test</title>
</head>
<style>
a{
display:inline-block;
width:100px;
height:40px;
background:#ff7200;
position:relative;
overflow:hidden;
text-align:center;
line-height:40px;
}
input{
position:absolute;
right:0;
top:0;
font-size:100px;
opacity:0;
filter:alpha(opacity=0);
}
</style>
<body>
<a href="#">
<input type="file" value="文件" />选择文件
</a>
</body>
</html>
下面图片样式：
.filename{
width:245px;
height:28px;
line-height:28px;
font-size:14px;
color:#686868;
text-indent:5px;
border:solid 1px #cbcbcb;
border-right:none;}
a{
display:inline-block;
position:relative;
top:1px;
width:93px;
height:30px;
line-height:30px;
font-size:16px;
text-align:center;
color:#fff;
background:#ff7200;
text-decoration:none;
}
.fileupload{
position:absolute;
right:0;
top:0;
font-size:100px;
opacity:0;
filter:alpha(opacity=0);
}
<input type="text" class="filename"/>
<a>
<input type="file" class="fileupload" id="file_upload" name="imgUrl" />选择文件
</a>
扫一扫
7213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
