利用样式覆盖来实现效果：先看下原本和改变后的样式

 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">如何实现自定义样式的更多相关文章

  1. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  2. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  3. input type= file 如何更改自定义的样式

    input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...

  4. 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...

  5. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  6. html中，文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

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

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

  8. input type="file"在各个浏览器下的默认样式，以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  9. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

随机推荐

  1. 剑指 Offer 39. 数组中出现次数超过一半的数字

    剑指 Offer 39. 数组中出现次数超过一半的数字 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 你可以假设数组是非空的,并且给定的数组总是存在多数元素. 示例 1: 输入: [ ...

  2. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  3. Linux命令（三）vim编辑器的常用命令

    .subTitle { background: rgba(51, 153, 0, 0.53); border-bottom: 1px solid rgba(0, 102, 0, 1); border- ...

  4. 接口自动化测试之httprunner初探

    ❝ 今天来介绍一个python的一个开源项目:httprunner,接口自动化工具.第一次输入,难免有不周到的地方,轻喷~ ❞ 介绍: HttpRunner是一个简单优雅但功能强大的 HTTP(S) ...

  5. 【原创】利用“进程注入”实现无文件不死webshell

    引子 上周末,一个好兄弟找我说一个很重要的目标shell丢了,这个shell之前是通过一个S2代码执行的漏洞拿到的,现在漏洞还在,不过web目录全部不可写,问我有没有办法搞个webshell继续做内网 ...

  6. Avro使用手册

    1. Overview Data serialization is a technique of converting data into binary or text format. There a ...

  7. kvm虚拟化的qcow2磁盘格式的扩容方法

    第一种:增加一块磁盘而另磁盘空间增大 1).先进入kvm环境,创建一块硬盘:qemu-img create -f qcow2 /home/tianke/test.qcow2 40G 2).再给增加的硬 ...

  8. NOIP 模拟 $26\; \rm 降雷皇$

    题解 \(by\;zj\varphi\) 用树状数组优化一下求最长上升子序列即可. 至于第二问,在求出答案后开 \(n\) 棵线段树,每颗维护当前最长上升子序列长度的方案数. Code #includ ...

  9. 字符串拷贝函数递归与非递归的C语言实现

    初学递归的时候,觉得很抽象,不好分析,确实如此,尤其是有些时候控制语句不对,导致程序进去无限次的调用,更严重的是栈溢出.既要正确的控制结束语句,又要有正确的进入下次递归的语句,还要有些操作语句.... ...

  10. 字节跳动基于Apache Hudi构建EB级数据湖实践

    来自字节跳动的管梓越同学一篇关于Apache Hudi在字节跳动推荐系统中EB级数据量实践的分享. 接下来将分为场景需求.设计选型.功能支持.性能调优.未来展望五部分介绍Hudi在字节跳动推荐系统中的 ...