<input type="file">如何实现自定义样式
利用样式覆盖来实现效果：先看下原本和改变后的样式
1 <!doctype html>
2 <html>
3 <head>
4 <title>file自定义上传样式</title>
5 <style>
6 *
7 {
8 margin: 0;
9 padding: 0;
10 }
11 /*蓝色按钮,绝对定位*/
12 .btn
13 {
14 position: absolute;
15 width: 100px;
16 height: 40px;
17 background-color: #2db7f5;
18 color: #fff;
19 text-align: center;
20 font-weight: 900;
21 border-radius: 4px;
22 }
23 /*自定义上传,位置大小都和btn完全一样,而且完全透明*/
24 .file-upload
25 {
26 position: absolute;
27 display: block;
28 width: 100px;
29 height: 40px;
30 opacity: 0;
31 cursor: pointer;
32 }
33 .file-name
34 {
35 position: absolute;
36 top:40px;
37 width: 100%;
38 height: 30px;
39 }
40 </style>
41 </head>
42 <body>
43 <button class="btn">上传文件</button>
44 <input type="file" class="file-upload" />
45 <div class="file-name"></div>
46 </body>
47 </html>
48 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
49 <script>
50 $(document).ready(function()
51 {
52 $(".file-upload").change(function()
53 {
54 var arrs=$(this).val().split('\\');
55 var filename=arrs[arrs.length-1];
56 $(".file-name").html(filename);
57 });
58 });
59 </script>
<input type="file">如何实现自定义样式的更多相关文章
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- input type= file 如何更改自定义的样式
input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...
- 自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...
- 自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...
- html中，文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- input type='file'文件上传自定义样式
使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...
- input type="file"在各个浏览器下的默认样式，以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
随机推荐
- Javas数组03——数组的使用
Javas数组--数组的使用 1.普通的for循环 2.for-each循环 3.数组做方法入参 4.数组做返回值 例子1--普通for循环 package array; public clas ...
- Python语法之用户交互与基本运算符
一.与用户交互 1.接收用户输入 python3中的input会把用户输入的所有内容都存成str类型 age = input("请输入您的年龄: ") # "内容&quo ...
- 1~n数字中1出现的个数
1~n数字中1出现的个数 LeetCode 给定一个整数 n,计算所有小于等于 n 的非负整数中数字 1 出现的个数. 感觉挺有意思 对于一个数,我们先局部分析一下,比如123456,我们考虑百位这个 ...
- PaddlePaddle之猫狗大战(本地数据集)
新手入门PaddlePaddle的一个简单Demo--猫狗大战 主要目的在于整体了解PP用卷积做图像分类的流程,以及最最重要的掌握自定义数据集的读取方式 猫狗数据集是从网络上下载到工作目录的. 本项目 ...
- 使用Cobertura做代码覆盖率测试
经验总结:首先要把cobertura.jar包含ant的classpath路径中,其次要求它包含在测试用例的classpath中: 使用cobertura做代码覆盖率测试中出现的问题:覆盖率始终为0, ...
- antd+vue3实现动态表单的自动校验
由于vue3用的人还不多,所以有些问题博主踩了坑只能自己爬出来了,特此做个记录.如有错误,请大家指正. 回归正题,我所做的业务是,动态添加表单项,对每一项单独做校验,效果如下: 主要代码如下: 1 & ...
- SpringBoot开发十八-显示评论
需求介绍 显示评论,还是我们之前做的流程. 数据层:根据实体查询一页的评论数据,以及根据实体查询评论的数量 业务层:处理查询评论的业务,处理查询评论数量的业务 表现层:同时显示帖子详情数据时显示该帖子 ...
- Pytest-Allure报告的Logo的完美定制
--本次需求:如何把生成的pytest-allure报告的logo修改成自定义的logo? --步骤如下: --1.找到本地电脑安装的allure-2.13.2路径E:\allure-2.13.2\p ...
- netty系列之:在netty中使用protobuf协议
目录 简介 定义protobuf 定义handler 设置ChannelPipeline 构建client和server端并运行 总结 简介 netty中有很多适配不同协议的编码工具,对于流行的goo ...
- 旧手机改造成web服务器并实现内网穿透
前几天由于gitee的审核引擎一通乱杀,使得gitee pages停止提供服务,心生更换服务器或者其他pages托管的想法,看了看价格感人的云服务器以及空空的钱包,这时,脑子有个奇怪的想法飘过,自己搞 ...