巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可
但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同
我们往往需要为其自定义样式,而直接对input添加样式是一件麻烦的事,
因为input本身有默认的样式,我们需要一一覆盖,并且一些样式我们也无法覆盖,
比如你想把选择文件的字体颜色设置为和未选择任何文件的字体颜色一样,就无法实现
以前遇到该问题时,我会新建一个div,给它添加相应样式,然后定位覆盖在原生input上面,
这样的做法虽然略显笨拙,但好在能够实际解决问题
现在有一种更好的方法可替代上面方法,那就是使用label标签,
用label标签的for属性关联到input文件输入框,点击label标签时会触发input文件输入框的点击,
打开浏览文件的对话框,相当于点击了文件输入框,记得把input隐藏掉
<!-- 自定义样式 -->
<label for="file-input">label</label>
<input type="file" id="file-input" style="display: none;" multiple="multiple" />
注:上面代码中的multiple属性表示上传文件时可多选,不加该属性默认只能选一个文件上传
巧妙利用label标签实现input file上传文件自定义样式的更多相关文章
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input file上传文件
如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...
- 使用input file上传文件中onChange事件只触发一次问题
每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
- angular input file 上传文件
<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)&qu ...
随机推荐
- JS内置对象-Array之splice-删插替
splice-删除 var arr = [1, 2, 3, 4, 5, 6]; //删除 var delArr = arr.splice(1, 2) console.log(arr); // => ...
- Java做成Zip文件,Java实现压缩文件
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- 分布式事务解决方案,中间件 Seata 的设计原理详解
作者:张乘辉 前言 在微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响 ...
- 信道估计之LS
在无线通信系统中,系统的性能主要受到无线信道的制约.基站和接收机之间的传播路径复杂多变,从简单的视距传输到受障碍物反射.折射.散射影响的传播.在无线传输环境中,接收信号会存在多径时延,时间选择性衰落和 ...
- Bug复盘:接口异步返回的重要性
前言 最近接收了一个老项目,突然甲方 QA 报了一个 bug,连续请求 60 次,成功 8 次,后面的 52 次全部失败,而且成功的 case 返回时间普遍较长.看了日志,并非业务上的异常.这让刚毕业 ...
- hdu 6299 Balanced Sequence (贪心)
Balanced Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- mysql中where和having子句的区别和具体用法
1.mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having ...
- AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding androidx.databinding.DataBinderMapper.getDataBinder(androidx.databinding.DataBindingComponent, android.view.View, int)"
混淆导致的数据绑定库错误 问题摘要 AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding an ...
- 敏捷之旅--携程行程&订单团队
转自本人运营的公众号“ 携程技术中心PMO”(ID:cso_pmo) 关于我们 我们面临的挑战 敏捷开发是以用户的需求进化为核心,采用迭代.循序渐进的方法进行软件开发.先把一个大项目分 ...
- 15. Go 语言“避坑”与技巧
Go 语言"避坑"与技巧 任何编程语言都不是完美的,Go 语言也是如此.Go 语言的某些特性在使用时如果不注意,也会造成一些错误,我们习惯上将这些造成错误的设计称为"坑& ...