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中Media Query的使用
Jul 07 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 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
Apache设置虚拟WEB
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
JS查看对象功能代码
2008/04/25 Javascript
很可爱的输入框
2008/08/03 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python切片操作深入详解
2018/07/27 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python将txt文件读取为字典的示例
2018/12/22 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
PHP面试题大全
2015/10/16 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
护理自我鉴定范文
2013/10/06 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
三下乡活动心得体会
2016/01/23 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技