处理各大浏览器的<input type="file">显示风格迥异的问题

最新推荐文章于 2022-04-24 22:01:34 发布
最新推荐文章于 2022-04-24 22:01:34 发布
阅读量696 收藏
点赞数
分类专栏： 浅谈前端学习 文章标签： 浏览器 input-风格迥异
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiguabanhua/article/details/50505399
版权
本文探讨了处理浏览器间<input type='file'>元素显示风格不一致的问题，通常采用设置opacity为0隐藏原组件，再通过CSS及JavaScript创建自定义样式。借助querySelector方法实现类jQuery选择器功能，简化DOM操作。详细解决方案和示例代码见内容。
摘要由CSDN通过智能技术生成

做任务的时候，发现，设计组给的psd文件的 上传文件中的<input type="file">的风格长这样
设计中的上传文件按钮 。
而实际中的各大浏览器一个<input type = "file"长这样：
各大浏览器的<input>样式。

这样就导致如果我们只是针对其他的一个浏览器样本改动代码，那么显然是不可取的，但是如果要是对多个浏览器都处理到位那么代码未免太多，现在大家都普遍采用的是把它设置为opacity:0;进行更改，然后设置一个div设置跟input type = “file”同级，再在div里面放一个,用js控制获取input type = “file”的值放到的值里面。

<body>
    <div><input type="text" class="txt"><label></label></div>
    <input mutitple =
最低0.47元/天 解锁文章
xiguabanhua
关注
专栏目录
WEB自动化测试总结篇
m0_67394006的博客
03-09 2024
一、初识WEB-selenium自动化测试 针对bing网站的搜索功能进行自动化测试 # 从谷歌公司的一个项目selenium导入webdriver这段代码来驱动浏览器 chrome=webdriver.Chrome() 2、打开bing网站 chrome.get(‘http://cn.bing.com/’) 3、输入关键词 chrome.find_element_by_id(‘sb_form_q’).send_keys(‘51tesing’) 4、点击搜索按钮 chrome.find_element_by
INPUT[type=file] 的 'value' 属性值在各浏览器中存在差异
weixin_33883178的博客
06-28 387
为什么80%的码农都做不了架构师？>>> ...
当input中的type值为file时，各浏览器的表现形式不同
diaomao7361的博客
09-27 196
如果想使各浏览器下的表现形式相同，需要对该input元素隐藏，然后再改元素下方添加标签。其html写法如下 <div class="input-file"> <input type="file" name="postImg" value="上传图片" id="upload" class="file-button"> <label class="fil...
html input file 控件 在不同浏览器 显示不同的解决方案
MENGCHIXIANZI的专栏
12-14 652
html input file 控件 在不同浏览器 显示不同的解决方案 问题描述 html 中的 input type 为file的控件 在Chrome浏览器中的显示 图片 来自https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file 但是在 edge浏览器中 图片 依旧来自https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/...
html+<input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
weixin_35336900的博客
06-23 332
标准参考根据 W3C HTML4.01 规范中的描述，type 属性为 "file" 的 INPUT元素在浏览器中将被渲染为一个文件选择控件(fileselect)，这种控件允许用户在其本地选择文件，通常由一个用于显示文件名的只读文本框及一个用于触发选择文件对话框的按钮组成。而规范中对文件选择控件只描述了其应具有功能，并没有限制其呈现方式。所以各浏览器按照自己的方式渲染该控件。关于文本选择控件 "...
input框在不同浏览器下面显示不同的结构问题
weixin_30876945的博客
12-26 249
在谷歌浏览器下面，无论input框范围再小，input里面的文字也能按照大小显示出来。 但是在火狐浏览器下面，文字会被截断。 火狐浏览器下面显示的 谷歌浏览器下面显示出来的 这里input框里面的宽度只有10px，所以文字会有截断。 火狐浏览器对齐方式是上对齐。截断下面部分 转载于:https://www.cnblogs.com/xiongmaoblog/p/6221090.htm...
luci网页shell_修改Luci界面
weixin_42626599的博客
01-14 756
修改Luci界面参考https://blog.csdn.net/hui523hui523hui523/article/details/38943693参考https://www.jianshu.com/p/bfb93c4e8dc9参考https://blog.csdn.net/weixin_43883277/article/details/98725690参考https://blog.cs...
转载：23种设计模式整理（很全）
qq_46120580的博客
04-24 1531
23 种设计模式汇集 目录 文章目录23 种设计模式汇集目录设计模式引言学习 GoF 设计模式的重要性建筑和软件中模式之异同设计模式之 Singleton(单态)模式实战书籍《Java 实用系统开发指南》单态定义:设计模式之 Factory工厂模式定义*:*提供创建对象的接口*.* 为何使用*?*工厂模式中有: 工厂方法*(Factory Method)* 抽象工厂*(Abstract Factory).*设计模式之 Builder设计模式之 Prototype(原型)设计模式之 Adapter(适配器)设
模拟input type=file
weixin_34319817的博客
07-01 124
表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用； 通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。 HTML代码如下： &lt;div class="type-file-box"&gt;&lt;form act...
input file隐藏浏览
faycat
05-18 1366
来自http://bbs.csdn.net/topics/320156312   html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> head> body> div>
解决input的file类型各浏览器的样式兼容
热门推荐
CodingAlarm的专栏
07-14 1万+
我们都希望做出的上传图片可以是以下这种美观的，但是原生的input file类型，不仅不美观 ，而且各浏览器都显示不同，如何解决呢？美观的 chrome下 firefox下 IE下 一般来说，我们会用“模拟”的方式，先把原生的file类型设置为透明（不是dispaly:none），然后用其它元素模拟出它的样子，file覆盖在之上。“上传”按钮再提交到服务器。目的是叠加成这种样子，然后把fil
chrome浏览器input[type=file]选择zip、exe等文件卡顿解决办法
u010576965的专栏
01-24 6654
在chrome浏览器下，使用input[type=file]上传，点击打开对话框，选择.zip、exe、apk等文件后，再次点击打开对话框，则出现卡顿现象，大概会在5~10秒，经过排查搜索，发现是chrome浏览器自带的问题，但是观察一些上传组件确发现没有卡顿问题，因此拿出jquery-file-upload上传插件对源码进行分析，情况如下：   经过分析，发现jquery
input file 浏览器兼容问题
sdaiweiy的专栏
06-18 6848
主要思想就是用一层遮罩input file 的位置，实现样式的统一。   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档
浏览选择上传文件的控件 input type=file
hardgirls的博客
01-16 3433
转载至：http://www.jb51.net/article/63628.htm 当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file 为什么要美化file控件？试想一下，别的孩子都穿戴整齐漂亮，其中两个孩子怎么都不鸟你，太不和谐了。     原始的file控件是这样的：
修正 input 标签 在 IE、chrome、Firefox浏览器下显示不一致的问题
无止境学的博客
12-02 1263
处理前，效果如图： Chrome Firefox IE 如图所示，除了chrome ，Firefox 、IE 下，输入框 的上边和左边均有黑色阴影，为了让他们效果一致，我们来为 input 标签，人为设定一个 border 样式 ，不使用浏览器默认的。 <!DOCTYPE html> <html> <head> <meta charset="...
<tr> <th contenteditable="true" ><input type="text" oninput="filterTable(1)" placeholder="aoiStep" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(2)" placeholder="defectType" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(3)" placeholder="layerCode" ></th> <th contenteditable="true" ><input type="text" oninput="filterTable(4)" placeholder="type"></th> <th contenteditable="true" ><input type="text" oninput="filterTable(5)" placeholder="dpet" ></th> <th contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="subcode" ></th> <th contenteditable="true" ><input type="text" placeholder="codeDescription" ></th> <th contenteditable="true" >image1</th> <th contenteditable="true" >image2</th> <th contenteditable="true">image3</th> <th contenteditable="true" >image4</th> <th contenteditable="true" >image5</th> <th contenteditable="true" ><input type="text" placeholder="determination_rule"></th> </tr> </thead> <tbody> <form action="upload.php" method="POST" enctype="multipart/form-data"> <tr> <td input type="text" name="aoi_step">3</td> <td input type="text" name="defect_type">Particle</td> <td input type="text" name="layer_code">ACT</td> <td input type="text" name="type">Particle</td> <td input type="text" name="dpet">ACT</td> <td input type="text" name="subcode">Particle</td> <td input type="text" name="code_description">ACT</td> <td> <input type="file" name="image1_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> <td> <input type="file" name="image2_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image3_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image4_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" name="image5_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td input type="text" name="determination_rule">Particle</td> <table id="data_table"> <thead> </form> </tbody> </table> 我只需要上传表格内容，不需要上传表头内容，应该怎么处理
最新发布
07-23
<td><input type="file" name="image2_path"></td> <td><input type="file" name="image3_path"></td> <td><input type="file" name="image4_path"></td> <td><input type="file" name="image5_path"></td> <td...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值