前言: 多数时候我们需要表单上传文件,如图片。但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改.

如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维.

 <div class="form-group">
<label for="avatar" class="col-md-2 control-label">上传头像:</label>
<div class="col-md-6">
<input type="file" name="avatar" id="avatar" class="form-control">
</div>
</div>

1. 首先在input[file]外层套一个容器(如div)

 <div class="form-group">
<label for="avatar" class="col-md-2 control-label">上传头像:</label>
<div class="col-md-6">
<div class="avatar"><input type="file" name="avatar" id="avatar" class="form-control">点击这里上传文件</div>
</div>
</div>

2. 定义div.avatar样式, 和input[file]样式

 .avatar {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 34px;
line-height: 34px;
border: 1px solid #99D3F5;
border-radius: 4px;
text-align: center;
background: #D0EEFF;
cursor: pointer;
}
.avatar input {
display: inline-block;
position: absolute;    // 设置input绝对定位,后面的文字才能往上移动
font-size: 12px;
top:;
left:;
opacity:;        // 将原来的input变透明
z-index:;
cursor: pointer;
}

效果如图:

更改file文件上传默认CSS样式的更多相关文章

  1. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  2. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  3. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  4. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  5. FormData序列化及file文件上传

    表单数据上传 情况一: 一.当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理:(极少使用): 但是传统的表单提交会导致页面刷新,但是有些情况下,我们并不希望 ...

  6. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

  7. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  8. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  9. PHP 多input file文件上传

    前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="mu ...

随机推荐

  1. ES6常用对象操作

    ES6常用对象操作 一. const 简单类型数据常量 // const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动.对于简单类型的数据(数值.字符串.布尔值),值就保存在 ...

  2. Angular4 Ng 模块

    原文地址 http://www.jianshu.com/p/317f0e4b7284 根模块 (root module) 每个应用都至少有一个根模块用来引导并运行应用.根模块通常命名为 AppModu ...

  3. 内存proc详解

    Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它常见的文件系统不同的是,/proc是一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过 ...

  4. [development][thrift] RPC框架 thrift

    一: wiki:https://zh.wikipedia.org/wiki/Thrift 二: 来自IBM的介绍:https://www.ibm.com/developerworks/cn/java/ ...

  5. iOS只给矩形两个边加圆角

    - (void)updataTopCornerRadius { CGRect clipRect = CGRectMake(, , self.headPhotoIv.width, self.headPh ...

  6. spring根据name或者id获取实例

    @Resource(name="beanname") private ClassType scheduler; 其中ClassType需要跟实例的类型对应上.

  7. linux 模拟发http请求的例子

    curl -X POST --header "Content-Type: application/json" --header "Accept: */*" &q ...

  8. 浏览器数据库 IndexedDB 入门教程

    一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...

  9. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  10. [GDOI2018]滑稽子图

    题目链接:[被和谐] 题目大意:对于一棵树$(V,E)$,对于$S\subset V$,$f(S)$为点集$S$的导出子图的边数.求$\sum_{S\subset V}f(S)^k$ 这里的导出子图说 ...