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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
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
用文本作数据处理
2006/10/09 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php中in_array函数用法探究
2014/11/25 PHP
JavaScript 事件系统
2010/07/22 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
大学生村官心得体会范文
2014/01/04 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
校庆团日活动总结
2014/08/28 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2016新年慰问信范文
2015/03/25 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
详解Go语言中Get/Post请求测试
2022/06/01 Golang
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL