![0d3cf0d6ed4f5378f984944d067257e5.png](https://img-blog.csdnimg.cn/img_convert/0d3cf0d6ed4f5378f984944d067257e5.png)
大家好,我来了,今天为大家带来的前端知识是”如何实现html+css自定义图片上传按钮功能?“,有兴趣做前端的朋友,一起来看看吧!
![540bfd68acc10968715031f3ba6ccb1a.png](https://img-blog.csdnimg.cn/img_convert/540bfd68acc10968715031f3ba6ccb1a.png)
普通的input[type=‘file’]的效果很朴素
![001f850c62a275fbc2dbd38ac89559f6.png](https://img-blog.csdnimg.cn/img_convert/001f850c62a275fbc2dbd38ac89559f6.png)
可以自定义一个file选择文件的按钮:
思路为:
用定位将自定义的按钮遮住原来的选择文件按钮,
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
(对此,label可实现)
eg:
html:
![dd27a10c407120fce1e358e622aaf592.png](https://img-blog.csdnimg.cn/img_convert/dd27a10c407120fce1e358e622aaf592.png)
css样式:
![1d3aff84eb2d2fa85b8df091446b8a8e.png](https://img-blog.csdnimg.cn/img_convert/1d3aff84eb2d2fa85b8df091446b8a8e.png)
结果图:
![9b43eee07b63cc8fe8bd7681c45a7fe7.png](https://img-blog.csdnimg.cn/img_convert/9b43eee07b63cc8fe8bd7681c45a7fe7.png)
点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!
以上,是用bootstrap实现的,原生的如下:
html:
![f6b4663d4090facb29d468ce7a80f38b.png](https://img-blog.csdnimg.cn/img_convert/f6b4663d4090facb29d468ce7a80f38b.png)
CSS:
![127176fab8bb7cc877e2990b5e9f98a0.png](https://img-blog.csdnimg.cn/img_convert/127176fab8bb7cc877e2990b5e9f98a0.png)
效果图:
![159b41a217dd357a42c1e9302c09e0a3.png](https://img-blog.csdnimg.cn/img_convert/159b41a217dd357a42c1e9302c09e0a3.png)
点一下,就可以弹出选择文件的文件夹啦!
————————————————
版权声明:本文为CSDN博主「吕小胖纸」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
html+css实现自定义图片上传按钮_weixin_42971933的博客-CSDN博客blog.csdn.net![ab95f049c35ad036090c25e0d1a4e555.png](https://img-blog.csdnimg.cn/img_convert/ab95f049c35ad036090c25e0d1a4e555.png)