自定义input[type=file]的兼容样式

input[type="file"]的样式在各个浏览器中的表现不尽相同:

1. chrome:

2. firefox:

3. opera:

4. ie:

5. edge:

另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了:


“未选择任何文件”这一行并没有竖直居中。

这些浏览器中的表现不一致,我们必须做兼容处理。

思路:

1. 自定义与其中一个浏览器表现类似的样式,将其放在下层;

2. 将浏览器本身的表现出来的样式“隐藏掉”, opacity:  0; 置于上层,这样我们点击的才是 input[type="file"] 响应的事件;

3. 选择文件或改变文件后,改变显示 file 的值。

<form action="" class="activityForm"><div class="file"><label for="file">文件:</label><div class="userdefined-file"><input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件"><button type="button">上传</button></div><input type="file" name="file" id="file">            </div>
</form>
.file {position: relative;height: 40px;line-height: 40px;
}
.file label {display: inline-block;
}
.userdefined-file {position: absolute;top: 0;left: 60px;z-index: 2;width: 300px;height: 40px;line-height: 40px;font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {display: inline-block;vertical-align: middle;padding-right: 14px;padding-left: 14px;width: 220px;box-sizing: border-box;border: 1px solid #ccc;height: 40px;line-height: 40px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.userdefined-file button {display: inline-block;vertical-align: middle;width: 80px;text-align: center;height: 40px;line-height: 40px;font-size: 14px;background-color: #f54;border: none;color: #fff;cursor: pointer;
}
.file input[type="file"] {position: absolute;top: 0;left: 60px;z-index: 3;opacity: 0;width: 300px;height: 40px;line-height: 40px;cursor: pointer;
}
document.getElementById("file").onchange = function() {document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

这样处理后,就在各个浏览器中表现一致了:

1. 未选择任何文件时,在 chrome 中:

2. 在选择文件后,在 firefox 中:

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Excel催化剂开源第37波-音视频文件元数据提取(分辨率,时长,采样率等)

上一篇提到图片元信息Exif的提取&#xff0c;当然还有一类音视频文件&#xff0c;也同样存储着许多宝贵的元数据&#xff0c;那就开源到底呗&#xff0c;虽然自己找寻过程也是蛮艰辛坎坷的&#xff0c;大家看后有收获&#xff0c;只求多多传播下&#xff0c;让前人的工作可以更…

ECharts 雷达图在类目值下面显示数值

需要实现的效果&#xff1a; 官网里面的demo显示数值&#xff0c;都是在拐点处&#xff1a; 【解决】 1、只显示类目 <div id"mychart" style"width:300px;height:300px;margin:0 auto;"></div><script>var arr1 [60,73,85,40,60];var…

RecyclerView复用item导致数据混乱

一般recyclerview会复用item以让recycler性能提升 但是我们有些时候会出现复用了之后混乱的情况 如何防止RecyclerView复用item呢 1 最好是每一个有判断的地方&#xff0c;都要写全所有情况&#xff0c;什么意思呢 if里textView设了一个值&#xff0c;false也必须设置一个值 2 …

echarts tooltip在图表范围内显示

以下两种解决方式&#xff0c;能够应对大部分出现此类问题项目 tooltip.position: 提示框浮层的位置&#xff0c;默认不设置时位置会跟随鼠标的位置。 可选&#xff1a;string, Array, Function 一、解决方法&#xff1a; 1、设置x轴固定不动 y轴上下跟随 /*设置x轴左右固定…

Vue.js 动态为img的src赋值

在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了&#xff0c;没有进行编译 解决方法&#xff1a; 1、用网络地址 把图片放在cdn或自己的服务器上&#xff0c;把网络地址存在imgUrl里&#xff0c;然后直接<img :src"Url"> 2.把图片放…

项目打包部署到Tomcat

一、 使用 npm run build打包完成之后会出现一个dist文件夹&#xff0c;里面有static文件夹和一个index.html文件&#xff0c;一般我们部署在tomcat上面会将文件放在webapps文件夹下 如果不进行任何修改将dist文件夹放进去的话&#xff0c;会出现资源路径错误的问题&#xff…

算法阶段三总结

3月25日-4月4日这段时间里。我把字符串的一些基本操作和算法学了下。主要有串的基本操作&#xff0c;字符串的hash函数&#xff08;Rabin-Karp&#xff0c;ELFhash&#xff09;&#xff0c;还有KMP算法。总体感觉还是不错的。尤其清明这三天没出去&#xff0c;都呆在宿舍了&…

vue.config和editorconfig

我们在做项目的时候&#xff0c;应该给经常用到的文件配置它的别名&#xff0c;这样做&#xff0c;既可以方便引用&#xff0c;也可以防止当文件位置发生改变的时候出现错误。 配置前: import bartar from ../../components/bartar 配置后(不用再关心文件层级关系): import bar…

Java生鲜电商平台-订单配送模块的架构与设计

Java生鲜电商平台-订单配送模块的架构与设计 生鲜电商系统最终的目的还是用户下单支付购买&#xff0c; 所以订单管理系统是电商系统中最为复杂的系统&#xff0c;其作为中枢决定着整个商城的运转&#xff0c; 本文将对于生鲜类电商平台的订单设计做一个完整的分析&#xff0c;…

vue项目,webpack中配置src路径别名及使用

默认会有‘’别名&#xff0c;指向src目录&#xff0c;还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况&#xff1a;在js中用&#xff0c;在css中用&#xff0c;在html文档内用 js中用&#xff0c;最简单: import {getName} from /util/namecss中使用&#xff0…

fastclick库的介绍和使用

移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候&#xff0c;通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。 注意几点 1、PC端无效 2、Android 上的 Chrome …

toString()和String.valueOf()的区别(转)

惯例广告一发&#xff0c;对于初学真&#xff0c;真的很有用www.java1234.com&#xff0c;去试试吧&#xff01; 有的朋友在用这两个的时候感觉差不多 其实&#xff0c;很多时候效果是差不多的 但是&#xff0c;有的时候用.toString()会报错&#xff0c;而用String.valueOf()就…

kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介绍 2.页面中 html模板页面中已经使用clientWidth/375*100px,已经赋值了html的fontsize随页面宽度而变化。 比如宽度375的屏 html的fontsize为100px kylin加载postcss-px2rem cnpm i --save-dev postcss-px2rem 在根目录下的plugin.js中 var px2rem…

VS2005无法启动解决方法(转)

一直有一个问题困扰&#xff0c;VS2005用得好好滴&#xff0c;突然有一天开始就进不去了&#xff0c;启动了以后&#xff0c;没有任何界面的出现&#xff0c;但是打开任务管理器&#xff0c;却能够看到进程的存在&#xff0c;真是奇怪了&#xff0c;我试图卸载并且重新安装&…

kylinH5框架之项目组件理解

目录 组件介绍 组件声明结构 组件接口 script dependency template style 状态注入 接口声明 组件介绍 Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。 import { Component, Watch } from al…

Markdown 语法简介

这是标题一 标题二 标题三 print(hello) 这是一个python 第一点 thiw dhaishd 第二点 转载于:https://www.cnblogs.com/BlogOfEr/p/11229682.html

kylinH5框架之项目开发调试

进行开发调试&#xff0c;需要完成以下步骤&#xff1a; 安装依赖开发调试构建生产 点击 代码示例&#xff0c;获取 Kylin Demo&#xff0c;并完成以下操作。 安装依赖 进入项目根目录&#xff0c;使用 cnpm 安装 npm 依赖&#xff1a; # 安装npm依赖 cnpm install 开发调试…

Java生鲜电商平台-深入订单拆单架构与实战

Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求&#xff0c;细思极恐&#xff0c;思考越深入&#xff0c;就会发现里面涉及的东西越来越多&#xff0c;要想做好订单拆单的功能&#xff0c;还是相当有难度&#xff0c; 因此总结了一下拆单功能细节&…

python3中Requests将verify设置为False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)调用成功但是会有如下警告信息&#xff1a; InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

kylinH5框架之项目脚手架

页面介绍 Page 是一个 Webview 的逻辑抽象层&#xff0c;同时也是组件挂载的根节点。 代码引入 import { Page } from ali/kylin-framework; 页面声明结构 一个Page包含的接口在页面接口中声明&#xff0c;提供了对 Vue 实例的完整控制能力&#xff0c;简易的 Page 使用如…