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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Django多数据库联用实现方法解析
2020/11/12 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年班级工作总结
2014/11/14 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
警示教育观后感
2015/06/17 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
利用Python+OpenCV三步去除水印
2021/05/28 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
python如何查找列表中元素的位置
2022/05/30 Python