<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. 【转】Spark实现行列转换pivot和unpivot

    背景 做过数据清洗ETL工作的都知道,行列转换是一个常见的数据整理需求.在不同的编程语言中有不同的实现方法,比如SQL中使用case+group,或者Power BI的M语言中用拖放组件实现.今天正好 ...

  2. Python使用turtle库与random库绘制雪花

    记录Python使用turtle库与random库绘制雪花,代码非常容易理解,画着玩玩还是可以的. 完整代码如下:   效果图如下:  

  3. 修改Linux的编码集

    使用SSH secure远程连接linux时,查看linux里的内容, 发现乱码.这是由于SSH secure客户端的编码是gbk ,而 linux的默认编码是utf-8 要解决乱码问题,必须将lin ...

  4. jap篇 之 JSTL标签库

    JSTL标签库: JSTL: JSP Standard Tag Library 作用:和[EL配合]使用,可以让用户[尽可能少的使用java源码]. 1,导入jar包 导入(复制粘贴到项目中的lib目 ...

  5. python中socket、进程、线程、协程、池的创建方式和应用场景

    进程 场景 利用多核.高计算型的程序.启动数量有限 进程是计算机中最小的资源分配单位 进程和线程是包含关系 每个进程中都至少有一条线程 可以利用多核,数据隔离 创建 销毁 切换 时间开销都比较大 随着 ...

  6. 【并发编程】一个最简单的Java程序有多少线程?

    一个最简单的Java程序有多少线程? 通过下面程序可以计算出当前程序的线程总数. import java.lang.management.ManagementFactory; import java. ...

  7. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  8. 【Linux网络编程】TCP网络编程中connect()、listen()和accept()三者之间的关系

    [Linux网络编程]TCP网络编程中connect().listen()和accept()三者之间的关系 基于 TCP 的网络编程开发分为服务器端和客户端两部分,常见的核心步骤和流程如下: conn ...

  9. Java Properties 类读配置文件保持顺序

    前几天,公司项目中有一个需求是读取配置文件的,而且最好能够保证加载到内存中的顺序能够和配置文件中的顺序一致,但是,如果使用 jdk 中提供的 Properties 类的话,读取配置文件后,加载到内存中 ...

  10. linux,pthread(转)

    互斥量.条件变量与pthread_cond_wait()函数的使用,详解(二)   1.Linux“线程” 进程与线程之间是有区别的,不过linux内核只提供了轻量进程的支持,未实现线程模型.Linu ...