转自：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. 安装Linux应该知道的十件事

    硬件,软件及其之间的一切 Linux机器的硬件和软件之间一切都由内核主宰. 内核负责硬件和软件的连接,每隔几个礼拜就可以在Internet上获取 更新的内核: 如果你自己安装内核并非易事,这时,就轮到 ...

  2. 浏览器指纹--纯js拿到浏览器指纹

    序言: 前两天有接收到一下问题,如何拿到浏览器指纹中的位置信息和CPU,在这之前完全没有接触过浏览器指纹,抱着学习和好奇的心态,就去网上查了大量的资料.下面我将学习过程和成果贴出来给大家. 步骤 1. ...

  3. Mysql5.7压缩版安装启动不了的问题

    从mysql 官网下载了mysql-5.7.12-winx64.zip的文件.按步骤安装: 1.添加环境变量     操作如下:     1)右键单击我的电脑->属性->高级系统设置(高级 ...

  4. 目标检测 — 计算IOU

    1.IOU=交集/并集 #include<iostream> #include<algorithm> #include<stdio.h> #include < ...

  5. ASP.NET Core 配置文件（无处不在的依赖注入）

    前烟: .NET Core 中取消了以往的 XML 节点配置文件,改用了 *.json 格式. 在 Startup.cs 文件中,构造方法 build appsetting.json 文件, 本文主要 ...

  6. Topshelf 和 Katana：统一的 Web 和服务体系结构

    Topshelf 和 Katana:统一的 Web 和服务体系结构 Wes McClure 下载代码示例 使用 IIS 托管 ASP.NET Web 应用程序已成为业界标准十年有余.构建此类应用程序的 ...

  7. linux 下sed命令

    sed命令是一个面向字符流的非交互式编辑器,也就是说sed不允许用户与它进行交互操作.sed是按行来处理文本内容的.在shell中,使用sed来批量修改文本内容是非常方便的. sed [选项] [动作 ...

  8. python_安装python2.7.7和easy_install

    [环境]: WIN7 + 32位 [要求]: 安装python2.7.7, easy_install 1. 下载并安装python2.7.7 首先访问http://www.python.org/dow ...

  9. hdu4970(线性区间更新的懒操作)

    思路是求出从每一点出发走到终点分别要受到多少伤害,然后和每个怪兽的血量比一下.给一个数组,告了哪些区间需要更新,我需要的就是都更新以后每个点的伤害值是多少.不涉及到区间查询,没必要用线段树或树状数组( ...

  10. 树莓派相机操作 —— luvcview 的安装、raspistill：摄像头命令

    MMAL (Multimedia Abstraction Layer) RaspiCam Documentation 0. lucview 的安装 安装命令:sudo apt-get install ...