<div class="div1">
<div class="div2">点击上传</div>
<input type="file" class="file_input">
</div>
css部分: <style>
.div1 {
position: relative;
} .div2 {
width: 100px;
height: 36px;
background: #2178fc;
color: #fff;
text-align: center;
line-height: 36px;
} .file_input {
width: 200px;/*因为file-input在部分浏览器中会自带一个输入框,需要双击才可以点击上传,放大后将其定位到div外面就好啦*/
height: 36px;
position: absolute;
left: -100px;
top: ;
z-index:;
-moz-opacity: ;
-ms-opacity: ;
-webkit-opacity: ;
opacity: ; /*css属性——opcity不透明度,取值0-1*/
filter: alpha(opacity=); /*兼容IE8及以下--filter属性是IE特有的,它还有很多其它滤镜效果,而filter: alpha(opacity=0); 兼容IE8及以下的IE浏览器(如果你的电脑IE是8以下的版本,使用某些效果是可能会有一个允许ActiveX的提示,注意点一下就ok啦)*/
cursor: pointer;
}
</style>

type=file的inpu美化,自定义上传按钮样式的更多相关文章

  1. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  2. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  3. input按钮上传按钮样式

    主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. CSS自定义文件上传按钮样式,兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

  5. 自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. [k]自定义上传文件按钮样式

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  7. el-upload自定义上传文件,并携带其余参数,且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...

  8. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  9. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

随机推荐

  1. HttpInvoker http请求工具类

    import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import j ...

  2. mysql查看存储过程函数

    查询数据库中的存储过程和函数 select `name` from mysql.proc where db = 'xx' and `type` = 'PROCEDURE'   //存储过程       ...

  3. dubbo框架提供Main方法运行容器的几种方式(转)

      本文使用的是dubbo提供的主类com.alibaba.dubbo.container.Main启动容器. 主要区别是提供不同插件的的启动方式. 目录 一.项目内容  1.1.目录结构图  1.2 ...

  4. Sumdiv POJ 1845

    http://poj.org/problem?id=1845 题目 Time Limit: 1000MS   Memory Limit: 30000K Description Consider two ...

  5. UVA 10618 Tango Tango Insurrection

    https://vjudge.net/problem/UVA-10618 题目 你想学着玩跳舞机.跳舞机的踏板上有4个箭头:上.下.左.右.当舞曲开始时,屏幕上会有一些箭头往上移动.当向上移动箭头与顶 ...

  6. java垃圾回收GC

    垃圾回收时,暂停虚拟机运行 基础假设:大部分对象只存在很短的时间 对于新生代,Minor GC经常会发生 Major/Full GC会对老生代做GC 老生代GC采用Compact算法,移动形成完整的空 ...

  7. bzoj 2816: [ZJOI2012]网络 (LCT 建多棵树)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2816 题面: http://www.lydsy.com/JudgeOnline/upload ...

  8. Django 模板系统

    Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...

  9. n98-magerun2.phar

    installl: 1,cd /usr/local/bin && curl -O https://files.magerun.net/n98-magerun2.phar 2,chmod ...

  10. Linux交换分区使用过多的处理办法

    处理办法 echo "vm.swappiness=0" >>/etc/sysctl.conf sysctl -p swapoff -a && swapo ...