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

 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. Java方法02——定义与调用

    方法的定义与调用 定义与调用 例子  package method; ​ public class Demon03 {     public static void main(String[] arg ...

  2. Windows安装Hyper-V并优化部署Linux虚拟机

    安装Hyper-V 打开服务器管理器-->添加角色和功能-->下一步,选择Hyper-V,如图所示 然后一直默认往下走,一直到安装完成,然后重新启动计算机,如图所示 其中涉及的虚拟交换机. ...

  3. 线程休眠_sleep

    线程休眠_sleep sleep(时间)指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间到达后线程进入就绪状态: sleep可以模拟网络延时,倒 ...

  4. 字符串对比 BASIC-15

    字符串对比 代码 import java.util.Scanner; /*给定两个仅由大写字母或小写字母组成的字符串(长度介于1到10之间),它们之间的关系是以下4中情况之一: 1:两个字符串长度不等 ...

  5. 一张图说明 iaas paas saas的区别

    图片来源:https://www.bilibili.com/video/BV1QJ411S7c4  P2 云服务的三种模式 1laaS(基础设施即服务) laas(Infrastructure as ...

  6. 提取网页的markdown表格利器

    在线Markdown表格转换器 markdown表格转换器,蛮好用的.偶然发现的开源工具,推荐一波. 这是目标链接:https://docs.locust.io/en/stable/configura ...

  7. 010 FPGA千兆网UDP通信【转载】

    一.以太网帧格式 图8‑12以太网帧格式 表8‑5以太网帧格式说明 类别 字节数 说明 前导码(Preamble) 8 连续 7 个 8'h55 加 1 个 8'hd5,表示一个帧的开始,用于双方设备 ...

  8. React性能优化总结

    本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...

  9. 剑指 Offer 13. 机器人的运动范围

    剑指 Offer 13. 机器人的运动范围 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] .一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左.右.上.下移动一 ...

  10. C#实现http协议GET、POST请求

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.Ne ...