html+css实现自定义图片上传按钮

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

q.png

普通的input[type=‘file’]的效果很朴素

q.png

可以自定义一个file选择文件的按钮:  

思路为: 

用定位将自定义的按钮遮住原来的选择文件按钮, 

再让点击自定义按钮时触发原来的选择文件按钮的事件即可 

(对此,label可实现)  

eg: 

html:

q.png

css样式:

q.png


结果图:

q.png

点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!  

以上,是用bootstrap实现的,原生的如下:  

html:

q.png


CSS:

q.png


效果图:

q.png

点一下,就可以弹出选择文件的文件夹啦!


评论