转自：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 利用QSplitter 分割区域， 并添加QScrollArea 滚动区域，滚动条

    1. QSplitter 分割区域, 可以分割区域中可以随意添加自己的布局 2. #include "dialog.h" #include <QApplication> ...

  2. UVA 11827 水

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  3. Debugging Tools for Windows__from WDK7

    1. 主要要用到两个工具: (1).WinDBG 这个主要用于 非IDE下 调试程序/查看信息等 (2).cdb.exe 这个主要是用在 Qt5.3.2 for VS10 的单步调试器 2. WDK7 ...

  4. Installing StackTach

    为StackTach创建database,默认使用MySql,也可以 在settings.py 文件中配置其他的. create stack db mysql -u root -p mysql> ...

  5. 我的java mvc

    mint mvc 并不是我原创的.她的基础是廖雪峰老师的webwind mvc. webwind是廖老师模仿spring的一个 rest 风格的 mvc 框架,功能简单,但是mvc的核心功能基本具备了 ...

  6. 【转】Pearson,Spearman,Kendall相关系数的具体分析

    测量相关程度的相关系数很多,各种参数的计算方法及特点各异. 连续变量的相关指标: 此时一般用积差相关系数,又称pearson相关系数来表示其相关性的大小,积差相关系数只适用于两变量呈线性相关时.其数值 ...

  7. linux 处理端口

    1.查看8080端口是否被占用: netstat -anp | grep 8080 2.查看占用8080端口的进程:fuser -v -n tcp 8080 3.杀死占用8080端口的进程: kill ...

  8. [基本操作]决策单调性优化dp

    一般的式子都是 $f_i = max\{g_j + w_{(i,j)}\}$ 然后这个 $w$ 满足决策单调性,也就是对于任意 $i < j$ ,$best_i \leq best_j$ 这样就 ...

  9. Redis底层探秘（四）：整数集合及压缩列表

    整数集合 整数集合(intset)是集合键的底层实现之一,当一个集合只包含 整数值元素,并且这个集合的元素数量不多时,Redis就会使用郑书记和作为集合键的底层实现. 整数集合的实现 整数集合是red ...

  10. 【LeetCode】005. Longest Palindromic Substring

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...