转自：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. Effective java第一章引言

    菜鸟一枚,开始读第一本书<Effective Java>(第二版)~ 看引言就有好多名词不懂(>_<) 导出的API由所有可在定义该API的包之外访问的API元素组成.一个包的 ...

  2. Centos 查看版本

    # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core)

  3. js简单工厂

    我以计算器为例写一个简单工厂模式,只完成加减乘除4个计算功能,考虑到其他功能方便日后扩展,遵循开放-封闭原则. 简单工厂类图: 先看一下C#的简单工厂是如何实现的: 定义抽象类Operation,加减 ...

  4. Left Join ，On Where

    SQL语句如下: SELECT * FROM 表1 LEFT JOIN 表2 ON 表1.id = 表2.id AND 表2.Name != 'ff' WHERE 表1.NAME != 'aa' 步骤 ...

  5. 一个android好博客

    http://blog.csdn.net/eastmount http://lishuaishuai.iteye.com/ 二维码:http://www.cnblogs.com/liuan/categ ...

  6. Install nginx on ubuntu

    1. Install libpcre3, libpcre3-dev2. Install zlib1g-dev3. Download nginx and unzip it4. ./configure5. ...

  7. SQL Server循环插入数据

    --循环执行插入10000条数据declare @ID intdeclare @eigyousyocode nvarchar(16)declare @datet datetimedeclare @pl ...

  8. ionic3 教程（一）安装和配置

    // 安装(失败的话 Mac 尝试使用 sudo,Windows 尝试管理员身份运行 cmd) $ npm install -g cordova ionic // 安装后可以验证一下 ionic cl ...

  9. JVM_总结_01_JDK的安装

    一.前言 本文主要简要介绍下JDK的安装 二.下载 1.JDK下载地址 前往官方网站下载JDK jdk8官网下载 2.JDK下载 如下图 下载完之后得到安装软件,如下图 三.安装 双击运行安装软件,即 ...

  10. vmware centos 连网方式

    1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,i ...