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属性实现炫酷读者墙效果
Jan 08 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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 Token(令牌)设计
2008/03/15 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JS实现滑动插件
2020/01/15 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python如何判断IP地址合法性
2020/04/05 Python
常用的10个Python实用小技巧
2020/08/10 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
幼师求职自荐信范文
2014/01/26 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
合伙购房协议样本
2014/10/06 职场文书
群众路线个人整改方案
2014/10/25 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
十月围城观后感
2015/06/08 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书