<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 ...
随机推荐
- PCE | 华中农大郭亮团队蛋白质组学揭示油菜内源氧化还原修饰介导盐胁迫响应
蛋白质翻译后修饰(PTM)在控制植物生长发育以及逆境适应方面发挥着重要的作用.发生在半胱氨酸巯基的亚磺酰化修饰(R-SOH)是一种可逆的氧化修饰类型,可以通过与其他修饰形态形成二硫键的形式来保护蛋白不 ...
- C++//菱形继承 //俩个派生类继承同一个基类 //又有某个类同时继承俩个派生类 //成为 菱形继承 或者 钻石 继承//+解决
1 //菱形继承 2 //俩个派生类继承同一个基类 3 //又有某个类同时继承俩个派生类 4 //成为 菱形继承 或者 钻石 继承 5 6 #include <iostream> 7 #i ...
- [TensorFlow2.0]-手写神经网络实现鸢尾花分类
本人人工智能初学者,现在在学习TensorFlow2.0,对一些学习内容做一下笔记.笔记中,有些内容理解可能较为肤浅.有偏差等,各位在阅读时如有发现问题,请评论或者邮箱(右侧边栏有邮箱地址)提醒. 若 ...
- 在线文本的编辑框——kindeditor富文本编辑的使用
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
- Greenplum 6安装指南（CentOS 7.X）
一.基本概念 Greenplum是一个面向数据仓库应用的关系型数据库,因为有良好的体系结构,所以 在数据存储.高并发.高可用.线性扩展.反应速度.易用性和性价比等方面有非常 明显的优势.Greenpl ...
- go-zero：微服务框架
go-zero 是一个集成了各种工程实践的 Web 和 rpc 框架,它的弹性设计保障了大并发服务端的稳定性,并且已经经过了充分的实战检验. go-zero 在设计时遵循了 "工具大于约定和 ...
- Windows提权小结
摸鱼的时候,想想内网这部分还有什么地方适合水一下,翻翻往期,开始填坑 总结一下Windows提权的部分,以后有时间再补一下Linux提权 这仍然是一篇思路总结类的随笔,具体细节内容不展开,也展开不了. ...
- tomcat下载、安装及配置
一,下载Tomcat 1.进入官网Http://tomcat.apache.org/,选择download,下载所需要的Tomcat版本. 注意有zip和exe两种格式的 zip(64-bit Win ...
- NOIP 模拟 $30\; \rm 毛一琛$
题解 \(by\;zj\varphi\) 如何判断一个集合可以被拆成两个相等的部分? 枚举两个集合,如果它们的和相等,那么他们的并集就是合法的,复杂度 \(\mathcal O\rm(3^n)\) \ ...
- Thread类中yield方法
Yield方法可以暂停当前正在执行的线程对象,让其他有相同优先级的线程执行.它是一个静态方法而且只保证当前线程放弃CPU占用而不能保证其它线程一定能占用CPU,执行yield()的线程有可能在进入到暂 ...