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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3美化表单控件全集
Jun 29 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php实现分页显示
2015/11/03 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
Python实现二分查找算法实例
2015/05/26 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
基于python实现把图片转换成素描
2019/11/13 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
无房证明范本
2014/09/17 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
军训决心书范文
2015/09/22 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
mysql分表之后如何平滑上线详解
2021/11/01 MySQL