转自：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. android里getView，inflate，listview问题

    今天在写一个listview的时候,遇到一个问题,如下 package com.brookji.funlearn; import java.util.ArrayList; import android ...

  2. Mac开机启动

    1. Finder打开资源库的LaunchAgents目录. 打开Finder,按⇧⌘G,输入 /Library/LaunchAgents/ 以及 ~/Library/LaunchAgents/ 2. ...

  3. Java 反射机制应用实践

    反射基础 p.s: 本文需要读者对反射机制的API有一定程度的了解,如果之前没有接触过的话,建议先看一下官方文档的Quick Start(https://docs.oracle.com/javase/ ...

  4. angularjs 简单指令

    <!DOCTYPE html> <html data-ng-app="app"> <head> <title>angular js& ...

  5. LSM树——LSM 将B+树等结构昂贵的随机IO变的更快，而代价就是读操作要处理大量的索引文件(sstable)而不是一个，另外还是一些IO被合并操作消耗。

    Basic Compaction 为了保持LSM的读操作相对较快,维护并减少sstable文件的个数是很重要的,所以让我们更深入的看一下合并操作.这个过程有一点儿像一般垃圾回收算法. 当一定数量的ss ...

  6. SQL Server 删除默认值

    alter table st_FuelConvertPatternSetting alter column tank_max_size decimal(5,2) not null declare @c ...

  7. 三张图较为好理解JavaScript的原型对象与原型链

    最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...

  8. 通过 objc_setAssociatedObject alert 和 button关联 及传值

    原文地址 http://blog.csdn.net/lengshengren/article/details/16886915 //唯一静态变量key static const char associ ...

  9. 浅学soap--------2

    使用wsdl文件: 生成wsdl <?php require('person.class.php'); // 引入生成wsdl的类文件 require('SoapDiscovery.class. ...

  10. nginx location配置与rewrite配置

    注:原文出处 www.linuxidc.com/Linux/2015-06/119398.htm 1. location正则写法 一个示例: location =/{ # 精确匹配 / ,主机名后面不 ...