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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 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/01/23 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JSON相关知识汇总
2015/07/03 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
python基础教程之缩进介绍
2014/08/29 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
详解Python编程中time模块的使用
2015/11/20 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python中join()方法介绍
2018/10/11 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
新员工培训个人的自我评价
2013/10/09 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
商场促销活动总结
2014/07/10 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
怎么用Python识别手势数字
2021/06/07 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Python使用openpyxl模块处理Excel文件
2022/06/05 Python