<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 ...
随机推荐
- 大厂Android岗高频面试问题：说说你对Zygote的理解！
前言 Zygote可以说是Android开发面试很高频的一道问题,但总有小伙伴在回答这道问题总不能让面试满意, 在这你就要搞清楚面试问你对Zygote的理解时,面试官最想听到的和其实想问的应该是哪些? ...
- 利用支付宝Cookie监听交易订单实现个人支付宝收款实时回调通知
在网上.社区里搜了一下好像没找到什么文章详细分享这种方式的,这些天我花了些时间研究整理了一下,发现这种方式能实时获取到支付宝里的二维码收款记录,从而很好地实现个人支付宝免签约收款实时回调,于是在这里分 ...
- Java ParallelStream
ParallelStream 处理数据 Stream 接口提供了parallelStream方法来将集合转换为并行流.即将一个集合分为多个数据块,并用不同的线程分别处理每个数据块的流. 并且使用par ...
- 基于Unity的A星寻路算法（绝对简单完整版本）
前言 在上一篇文章,介绍了网格地图的实现方式,基于该文章,我们来实现一个A星寻路的算法,最终实现的效果为: 项目源码已上传Github:AStarNavigate 在阅读本篇文章,如果你对于里面提到的 ...
- 代码重构与单元测试——使用“以查询取代临时变量”再次对Statement()方法进行重构（七）
代码重构与单元测试(一) 代码重构与单元测试--测试项目(二) 代码重构与单元测试--"提取方法"重构(三) 代码重构与单元测试--重构1的单元测试(四) 代码重构与单元测试--对 ...
- 十六进制转十进制 BASIC-12
十六进制转十进制 代码 import java.math.BigInteger; import java.util.Scanner; /* * 从键盘输入一个不超过8位的正的十六进制数字符串, * 将 ...
- 案例分享：Qt政务标签设计器，标签排版软件定制与打印
需求 1.标签设计器: 2.具备文字排版功能: 3.支持六种排版格式: 4.排版后可以输出打印(demo中不包含): 5.排版后可以输出标签的指定协议文本FBD格式: 6.可以调整对应标 ...
- 《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
1.简介 按计划今天宏哥继续讲解css的定位元素的方法.但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用. 2.常用定位方法(8种) (1)id(2)name(3)class name( ...
- Git（9）-- 远程仓库的使用
@ 目录 1.查看远程仓库:git remote 2.添加远程仓库:git remote add 3.从远程仓库中抓取与拉取:git fetch和 git pull 4.推送到远程仓库:git pus ...
- DVWA靶场之File Upload（文件上传）通关
Low: <?php if( isset( $_POST[ 'Upload' ] ) ) { // Where are we going to be writing to? $target_pa ...