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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
浅谈php://filter的妙用
2019/03/05 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
解决python删除文件的权限错误问题
2018/04/24 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
pytorch实现查看当前学习率
2020/06/24 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
《老山界》教学反思
2014/04/08 职场文书
体育专业求职信
2014/07/16 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
500字作文之周记
2019/12/13 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技