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


Posted in HTML / CSS onSeptember 04, 2019

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

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

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

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

思路为:

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

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

(对此,label可实现)

eg:

html:

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

css样式:

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

结果图:

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

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

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

html:

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

CSS:

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

效果图:

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

总结

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

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 #HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 #HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 #HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
You might like
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
js函数般调用正则
2008/04/08 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JS中的多态实例详解
2017/10/15 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
美的官方商城:Midea
2016/09/14 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
搞笑创意广告语
2014/03/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2016年公司新年寄语
2015/08/17 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python