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表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 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实现链结人气统计
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
解决python replace函数替换无效问题
2020/01/18 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
linux下进程间通信的方式
2014/12/23 面试题
会计岗位描述
2014/02/22 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
培养联系人考察意见
2015/06/01 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript