更改file文件上传默认CSS样式

摘要:
前言:大多数时候,我们需要表单来上传文件,例如图片。

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

更改file文件上传默认CSS样式第1张

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

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

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

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

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

 1 .avatar {
 2     position: relative;
 3     display: block;
 4     overflow: hidden;
 5     width: 100%;
 6     height: 34px;
 7     line-height: 34px;
 8     border: 1px solid #99D3F5;
 9     border-radius: 4px;
10     text-align: center;
11     background: #D0EEFF;
12     cursor: pointer;
13 }
14 .avatar input {
15     display: inline-block;
16     position: absolute;    // 设置input绝对定位,后面的文字才能往上移动
17     font-size: 12px;
18     top: 0;
19     left: 0;
20     opacity: 0;        // 将原来的input变透明
21     z-index: 1;
22     cursor: pointer;
23 }

效果如图: 

更改file文件上传默认CSS样式第2张

免责声明:文章转载自《更改file文件上传默认CSS样式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Amazon教程:刚买就降价!避免损失,申请PRICE MATCH(价格保护)的方法Perl函数及参数介绍下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS定位

css定位css有三种基本的定位机制:普通流,浮动和绝对定位。css中position属性static,relative,absolute,fixed      position:relative相对定位会按照元素的原始位置对该元素进行移动      position:absolute绝对定位,元素可以放置到页面上的任何位置,后面加上left,top等值 ...

纯css实现单张图片无限循环无缝滚动

参考链接:https://blog.csdn.net/qq_20777797/article/details/77916029 https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html 需求是一共有两个,1、单张竖图持续向上无缝滚动, 2、单张竖图滚动到正中间之后,停留3s,继...

less 官网讲解 ( http://www.bootcss.com/p/lesscss/ )

变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { co...

CSS和SVG中的剪切——clip-path属性和&amp;lt;clipPath&amp;gt;元素

CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中,将介绍CSS和SVG中的剪切技术。 特别声明:本文提供的DEMO可能在你的浏览器中不能正常的演示,你应该查看这个表格了解更多相关的信息。你在阅读这篇文章之时没有必要查看提供的DEMO。不是所有的剪...

巧用hover改变css样式和背景

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script...

CSS基础学习

盒模型 CSS 框模型 (Box Model) 规定了元素框处理元素内容(element)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。 注意:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 定位 position 属性 通过使用po...