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

 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. C++ //关系运算符重载 < = > !=

    1 //关系运算符重载 < = > != 2 #include <iostream> 3 #include <string> 4 using namespace s ...

  2. [JAVA]关于excel的jxl包的操作-创建sheet

    前言 最近玩的游戏需要记录数据, 手打excel太麻烦了 于是就学了学java的jxl操作.本来记录在有道云笔记就可以的,由于乐于分享的精神 就在博客园造了个号, 之前自己本来有做个人的网站的,奈何网 ...

  3. kubernetes中headless类型的service

    目录 初识headless类型的service 开始研究headless类型的service headless类型的service之我的理解 初识headless类型的service 第一次使用ran ...

  4. 命令执行 安鸾 Writeup

    目录 命令执行 01 命令执行 02 仅代码层面来说,任意命令执行漏洞的利用条件: 1.代码中存在调用系统命令的函数 2.函数中存在我们可控的点 3.可控点没有过滤,或过滤不严格. Linux命令连接 ...

  5. CVE-2021-1732 Windows 本地权限提升漏洞 EXP 下载

    漏洞简介 2021年2月10日,微软修复了一个Windows本地权限提升漏洞,漏洞编号为 CVE-2021-1732 ,本地攻击者可以利用该漏洞将权限提升为 System ,目前EXP已公开. 影响范 ...

  6. OSPF和ACL综合实验

    一.实验拓扑: 二.实验要求: 1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R1.R2.R3只允许被IT登录管理:4.YF和CW之间不 ...

  7. 启动Django报错:SyntaxError: Generator expression must be parenthesized 解决办法

    这是因为版本不兼容所导致的. 此错误已知与Python问题#32012相关.基于Django 1.11.16及以下的项目将在Python 3.7启动时引发此异常.此问题的补丁已合并到Django 2. ...

  8. 题解 math

    传送门 赛时用一个奇怪的方法过掉了 首先\(b_i\)的有效范围是\([0, k-1]\) 发现不同的\(a_i*b_i\)会有很多重的 考虑把\(a_i\%k\),然后由小到大排序 按顺序扫,如果某 ...

  9. uwp 基础知识

    (TitleId,DiaplayName,args,LogoUri,size); Obj.VisualElements.ShowNameOnSquare150x150Logo = true; if ( ...

  10. [ASP.NET MVC]EntityFramework离线部署

    根据项目需要可能会需要离线开发或者网速不好的情况下,很难配置EF,这种情况下就进行离线配置 (1)下载离线EF包: EF6.0的packages,百度网盘链接:https://pan.baidu.co ...