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

 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. Android性能优化——性能优化的难题总结

    前言 现在都在谈性能优化或者在面试的时候被问到性能优化相关问题,那么我们为什么要做性能优化呢?以及性能优化的难点是什么?在整个项目周期中不同的阶段该做什么?优化效果如何长期保持?作为一名Android ...

  2. Android Kotlin Jetpack Compose UI框架 完全解析

    前言 Q1的时候公司列了个培训计划,部分人作为讲师要上报培训课题.那时候刚从好几个Android项目里抽离出来,正好看到Jetpack发布了新玩意儿--Compose,我被它的快速实时打包给吸引住了, ...

  3. UVa120 煎饼(选择排序思想)

    题目背景 给你一迭薄煎饼,请你写一个程式来指出要如何安排才能使这些薄煎饼由上到下依薄煎饼的半径由小到大排好.所有的薄煎饼半径均不相同. 要把薄煎饼排好序需要对这些薄煎饼做翻面(flip)的动作.方法是 ...

  4. git只提交部分修改的文件（提交指定文件）

    在我们的项目中,经常会在本地编译一些代码,还未写完,测试那边来告诉你要改改某个文件的bug,非常着急,此时改完了,提交的时候,自己还在编译的代码并不想提交,此时,你可以利用git这些指令帮助你! 1/ ...

  5. Linux 文件目录管理的指令

    1.知识点:绝对路径:写法从/(根目录开始) /usr/share/doc 相对路径:不从/开始  如cd ../man 如果清楚文件夹内部情况,建议使用相对路径在文件夹之间跳转,而不用绝对路径,每次 ...

  6. python3+telnetlib实现简单自动测试

    1 telnetlib介绍 1.1 简介 官方介绍文档:telnetlib -- Telnet 客户端 - Python 3.9.6 文档 telnetlib 模块提供一个实现Telnet协议的类 T ...

  7. 嵌入式Linux可用的防火墙——iptables：实现ip白名单、mac地址白名单

    iptables是linux系统下的一个功能强大的模块,不仅可以用作防火墙,还可以实现NAT等众多路由功能.iptables的容器有很清晰的层次关系: 1. iptables是表的容器,iptable ...

  8. SSRF详解

    上一篇说了XSS的防御与绕过的思路,这次来谈一下SSRF的防御,绕过,利用及危害 0x01 前置知识梳理 前置知识涉及理解此漏洞的方方面面,所以这部分要说的内容比较多 SSRF(Server-Side ...

  9. Set重写hashCode和equals方法实现引用对象去重

    运作原理: 首先判断hashCode是否相同,如果不同,直接判定为两个不同的对象.如果hashCode相同,再去比较equals是否一样,如果一样,则为同一个对象.如果不一样,则是两个不同对象. 那么 ...

  10. .net 温故知新：【5】异步编程 async await

    1.异步编程 异步编程是一项关键技术,可以直接处理多个核心上的阻塞 I/O 和并发操作. 通过 C#.Visual Basic 和 F# 中易于使用的语言级异步编程模型,.NET 可为应用和服务提供使 ...