首页 > 网页制作 > html5

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

admin html5 2022-02-06 13:14:54 html   css   自定义图片   上传按钮"

自定义上传图片按钮

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

普通的file效果

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

思路为:

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

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

(对此,label可实现)

eg:

html:

自定义选择文件按钮替换原按钮布局

css样式:

自定义选择文件按钮CSS样式布局

结果图:

自定义选择图片按钮

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

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

html:

原生自定义文件上传按钮html

CSS:

原生自定义文件上传按钮CSS

效果图:

原生自定义文件上传按钮的效果图

总结

以上所述是小编给大家介绍的html+css实现自定义图片上传按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对潘少俊衡网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/76726.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持