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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
浅析vue-router原理
2018/10/19 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python中的id()函数指的什么
2017/10/17 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python序列类型的打包和解包实例
2019/12/21 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
政工例会汇报材料
2014/08/26 职场文书
党员个人总结范文
2015/02/14 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
《社戏》教学反思
2016/02/22 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
详解TypeScript的基础类型
2022/02/18 Javascript
解决MySQL报“too many connections“错误
2022/04/19 MySQL