普通的input[type=‘file’]的效果很朴素可以自定义一个file选择文件的按钮：
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
思路为：用定位将自定义的按钮遮住原来的选择文件按钮，再让点击自定义按钮时触发原来的选择文件按钮的事件即可（对此，label可实现）效果图：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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:1pxsolid#23c6c8;background-color:#23c6c8;color:#fff;border-radius:3px;}.btn:hover{border:1pxsolid#23babc;background-color:#23babc;}.btninput{position:absolute;top:0;left:0;opacity:0;}</style></head><body><labeltype="button"class="btn"><span>选择图片</span><inputtype="file"></label></body></html>
