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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
第十四节--命名空间
2006/11/16 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
vue组件与复用详解
2018/04/08 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
教育专业个人求职信
2013/12/02 职场文书
委托培训协议书
2014/11/17 职场文书
婚内分居协议书范文
2014/11/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
保护环境的宣传语
2015/07/13 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书