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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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和ACCESS写聊天室(五)
2006/10/09 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
python之随机数函数的实现示例
2020/12/30 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
大学生入党思想汇报
2014/01/01 职场文书
新文化运动的基本口号
2014/06/21 职场文书
万能检讨书
2015/01/27 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
国家助学金受助感言
2015/08/01 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS