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

可以自定义一个file选择文件的按钮:
思路为:
用定位将自定义的按钮遮住原来的选择文件按钮,
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
(对此,label可实现)
eg:
html:

css样式:

结果图:

点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!
以上,是用bootstrap实现的,原生的如下:
html:

CSS:

效果图:

点一下,就可以弹出选择文件的文件夹啦!
分享一个前端经典资源共享群:

本文介绍如何使用HTML和CSS自定义文件上传按钮的外观,并通过定位技巧将其覆盖在默认的文件输入框上,同时保持文件选择功能不变。适用于前端开发者学习。
2165

被折叠的 条评论
为什么被折叠?



