转自：http://zixuephp.net/article-85.html

思路：在一个div里面添加一个图片用作按钮再添加一个input file 文件上传，把文件上传按钮设置透明度为0，绝对定位覆盖在图片上，就实现了自定义上传图片按钮美化了。

html
  1. <div style="position:relative;">
  2. <img src="add.png" width="100"/>
  3. <input type="file" name="file" style="position:absolute;top:0px;left:12px;opacity:0;width:100px;height:100px;"/>
  4. </div>

css 文件上传按钮美化的更多相关文章

  1. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. CSS自定义文件上传按钮

    今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选 ...

  3. CSS自定义文件上传按钮样式，兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

  4. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  5. input上传按钮美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. input美化上传按钮美化

    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...

  7. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  8. 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化

    后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...

  9. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

随机推荐

  1. QT 创建对话框 Dialog 实例

    1. 2. dialog.h 头文件 #ifndef DIALOG_H #define DIALOG_H #include <QDialog> QT_BEGIN_NAMESPACE cla ...

  2. js代理模式

    代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象.替身对象对请求做出一些处理之后,再把请求转交给本体对象. 代理模 ...

  3. 我的博客搬家到https://www.w2le.com/了

    大家以后想看我的博文的请到这里哦,欢迎大家访问https://www.w2le.com/

  4. C++（十一）— map的插入、查找、删除

    标准库map类型是一种以键-值(key-value)存储的数据类型. map是STL的一个关联容器.它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值 ...

  5. 解决：phantomjs helloworld.js报错: Can't open 'helloworld.js'

    PhantomJS是一个无界面的,可脚本编程的WebKit浏览器引.它原生支持多种web 标准:DOM 操作,CSS选择器,JSON,Canvas 以及SVG. 当我安装好PhantomJS后,写下第 ...

  6. wordpress 插件 汉化

    http://blog.wpjam.com/article/localizing-a-wordpress-plugin-using-poedit/ 翻译或者说本地化 WordPress 插件和主题可以 ...

  7. Django ImageField 上传图片并保存到数据库

    转自:http://logic0.blog.163.com/blog/static/188928146201371235435974/ Form代码: class ImageUploadForm(fo ...

  8. Investment（完全背包）

    个人心得:炸了炸了,这背包什么的脑阔痛. 完全背包什么鬼咯,状态正向转移与01背包正好相反. 二维数组的状态转移. 一维数组的优化,注意正向覆盖. 本题中的思想 ;y<=year;y++){ ; ...

  9. Rabbitmq用户权限配置

    由于账号guest具有所有的操作权限,并且又是默认账号,出于安全因素的考虑,guest用户只能通过localhost登陆使用,并建议修改guest用户的密码以及新建其他账号管理使用rabbitmq(该 ...

  10. Webpack之“多页面开发”最佳实战

    前言:相信之前看过这篇文章,前端构建工具之“Webpack”的朋友,对于Webpack有了一定的了解.那么今天就跟大家分享下:如何利用webpack,来进行多页面项目实战开发. 一.项目初始化安装 1 ...