转自：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. HDU 3966 & POJ 3237 & HYSBZ 2243 & HRBUST 2064 树链剖分

    树链剖分是一个很固定的套路 一般用来解决树上两点之间的路径更改与查询 思想是将一棵树分成不想交的几条链 并且由于dfs的顺序性 给每条链上的点或边标的号必定是连着的 那么每两个点之间的路径都可以拆成几 ...

  2. psd文件中截取固定大小的图片

    1.选择需要操作的图层 使用选框工具, 设置固定大小和固定大小的值,在图层上拉取选区 2.使用移动工具  使用垂直.水平居中 使选择的icon在选区块中间 3.再选择好块区域调整好位置后 使用截取工具 ...

  3. 【转载】postgreSQL在linux中安装详解

    .编译环境 Linux: CentOS 5.5 gcc: 4.1.2 1. 安装PostgreSQL 1) 解压postgresql-9.1.7.tar.bz2 #tar jxvf postgresq ...

  4. Eclipse下利用Maven创建SpringBoot的Restful风格程序

    参考文章:https://spring.io/guides/gs/rest-service/ 中文翻译:https://blog.dubby.cn/detail.html?id=9040 1.目标是什 ...

  5. Androidstudio与unity交互踩坑（黑屏问题）

    unity打包好的apk运行出现黑屏,made with unity的界面都没有出现 原因是android项目中MainActivity没有继承UnityPlayerActivity

  6. 特殊字符处理（WPF）

    WPF XAML 特殊字符(小于号.大于号.引号.&符号) - Andrew.Wangxu 时间 2013-09-07 18:14:00  博客园-所有随笔区原文  http://www.cn ...

  7. nodeJs爬虫小程序练习

    //爬虫小程序 var express = require('express'); //superagent是一个http的库,可以发起get和post请求 var superagent = requ ...

  8. 如果看看机器ip和域名ip

    1.如果查看一个机器IP ifconfig或hostname -i //linux ipconfig //windows 2.查看一个域名对应ip ping www.baidu.com 下面会显示域名 ...

  9. java学习笔记 --- IO流小结

    IO流  |--字节流    |--字节输入流     InputStream      int read():一次读取一个字节      int read(byte[] bys):一次读取一个字节数 ...

  10. UVA 11176 Winning Streak

    #include <iostream> #include <stdio.h> #include <cstring> #define N 501 using name ...