普通的input[type=‘file’]的效果很朴素
可以自定义一个file选择文件的按钮:
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
思路为:
用定位将自定义的按钮遮住原来的选择文件按钮,
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
(对此,label可实现)
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
position: relative;
display: inline-block;
width: 75px;
height: 25px;
overflow: hidden;
text-align: center;
font-size: 14px;
line-height: 25px;
vertical-align: center;
border: 1px solid #23c6c8;
background-color: #23c6c8;
color:#fff;
border-radius: 3px;
}
.btn:hover{
border: 1px solid #23babc;
background-color: #23babc;
}
.btn input{
position: absolute;
top:0;
left: 0;
opacity: 0;
}
</style>
</head>
<body>
<label type="button" class="btn">
<span>选择图片</span>
<input type="file">
</label>
</body>
</html>