html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
标准参考
根据 W3C HTML4.01 规范中的描述,type 属性为 "file" 的 INPUT
元素在浏览器中将被渲染为一个文件选择控件(file
select),这种控件允许用户在其本地选择文件,通常由一个用于显示文件名的只读文本框及一个用于触发选择文件对话框的按钮组成。而规范中对文件选择控件只描述了其应具有功能,并没有限制其呈现方式。所以各浏览器按照自己的方式渲染该控件。
关于文本选择控件 "INPUT[type=file]" 的详细信息,请参考 HTML 4.01 规范 17.2.1
中的内容。
问题描述
对于文本选择控件 "INPUT[type=file]" ,各浏览器对其有不同形式的渲染,并且某些 CSS
特性也有着不同的表现。其中 Chrome Safari中对文件选择控件的渲染样式与其他浏览器有较大区别,这是由于浏览器所用的
WebKit 内核设计所致。
造成的影响
浏览器之间不同的渲染方式将造成某些视觉上的差异,但并不影响功能的使用。
受影响的浏览器
所有浏览器
问题分析
上面代码在浏览器中将被渲染为一个文件选择控件。这个控件在各浏览器的呈现方式如下:
未选择文件
已选择文件
IE
Firefox
Chrome
Safari
Opera
可以看到 IE Firefox Opera
会渲染一个文本框用于显示选择的全路径文件名,一个按钮用于触发文件选择对话框;Chrome Safari
则会渲染一个按钮用于触发文件选择对话框,其右侧直接显示文本,当未选择文件时为 "未选择文件"
,选择文件后为选择的文件名(不包含路径)。
下面为文件选择控件设置一些 CSS 特性,看看各浏览器的渲染差异:
这段代码在不同的浏览器环境中的表现:
IE
Firefox
Chrome, Safari
Opera
解决方案
在 Chrome Safari 中对于文件选择控件的特殊呈现方式为 WebKit 内核特有,且其渲染方式也符合 W3C
对文件选择控件的规定。一般来说这种差异不会带来严重的兼容性问题。
form.example input {
background: url('input_boxes.gif') no-repeat 0 -58px;
border: none;
width: 241px;
height: 20px;
padding-left: 3px;
padding-top: 3px;
}
form.example input:focus {
background-color: transparent;
}
form.example div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.example input.file {
width: 300px;
margin: 0;
}
form.example input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.example div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
var W3CDOM = (document.createElement_x && document.getElementsByTagName);
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement_x('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement_x('input'));
var image = document.createElement_x('img');
image.src='button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName_r('input');
for (var i=0;i
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName_r('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
initFileUploads();
参见
html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同相关推荐
- qt中设置父窗口中某一控件样式后,子窗口中某一控件也随父控件样式
引言 创建的窗口中含有滚动区域,滚动区域创建了很多按钮,点击按钮后弹出一个弹框,当设置了滚动区域的中心窗口的背景样式后,之前设置好的点击后按钮弹出框的背景样式也跟随着变化了. 方法 究其原因是因为滚动 ...
- 不同浏览器input file样式不一样
2019独角兽企业重金招聘Python工程师标准>>> 在开发项目过程中会碰到不同浏览器input file样式不一样. 经过分析,打算都用IE上面的附件上传样式, 方案如下: 1 ...
- 【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...
- 四种常见的浏览器内核简介----JS城市选择控件
一 四种常见的浏览器内核简介 Gecko: Gecko: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此, ...
- html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明 将inp ...
- input眼睛显示 vue_修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标...
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- HTML基本语法之表单标签:表单的组成 ,表单域,表单控件元素(表单元素) ,input表单元素, label标签, 表单控件(表单元素), select表单元素, textarea表单元素
文章目录 表单标签 表单的组成 表单域 常用属性: 表单控件元素(表单元素) input表单元素 label标签 表单控件(表单元素) select表单元素 textarea表单元素 表单元素几个总结 ...
- iOS 使用UI控件的外观协议UIAppearance进行设置默认UI控件样式
在iOS开发中,经常会对UINavigationBar的样式进行全局样式.采用的设置方式有两种: 第一种,采用方式如下: [UINavigationBar appearance] 这种是对一类对象的默 ...
- jqGrid中时间控件input的值赋给点开后的laydate控件
可以看到上课时间的值是8点-10点 点击时间控件选择时间时,时间控件不会根据已有的时间数据显示默认值,而是显示当前时间? Q:为什么会显示当前时间,怎么解决这个问题? A: 代码如下: getTime ...
最新文章
- 去年亏11亿的寒武纪拟科创板募资28亿:三年总营收5.68亿,99%客户来自国内,曾从华为海思挖来CTO...
- android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...
- 【错误记录】Android Studio 导入外部 so 动态库报错 ( java.lang.UnsatisfiedLinkError | 指定 APK 打包动态库的 CPU 架构 )
- MySQL 免安装版的下载与配置教程
- 在 SAP Business Application Studio 里访问 SAP HANA Cloud 实例
- Elasticsearch 5.2.x 使用 Head 插件连接不上集群
- 远程连接管理软件 v1.0
- [转]各种互斥量的总结
- gnu ld链接出现“ no .eh_frame_hdr table will be created.”
- iOS下微信语音播放之切换听筒和扬声器的方法解决方案
- 方立勋_30天掌握JavaWeb_Web开发入门
- mw150um 驱动程序win10_水星MW150UM无线网卡驱动下载-水星MW150UM 1.0无线网卡驱动官方版下载[电脑版]-华军软件园...
- 从Alexander Egyed的论文看程序语言和软件工程的论文写作风格差异
- 孤军大作战!疯狂DIY 1U硬件防火墙实录(转)
- 添加Win10文件夹详细信息------统一显示内容
- Microsoft Graph PowerShell v2 发布公开预览版 - 一半的大小,加速的自动化体验
- python 动态仪表盘_利用EXCEL的power pivot+切片器制作动态仪表盘
- STM32_RTC晶振不起振的原因及解决方法
- 浙江大学电子信息计算机,浙江大学城市学院计算机与计算科学学院 党政办 计算学院新增12名浙江大学电子信息专业硕士研究生导师...
- 青龙脚本库总结(不定期更新版)10月12日
热门文章
- opencv复杂变换cvPyrDown [6]
- 用C做的电子时钟程序
- 7-1-JavaBean基础
- ros创建工作空间_ROS 初级 - 安装和配置 ROS 环境
- matlab的7.3版本是什么_MX Linux 19.3 发布,Debian和antiX Linux的混合版本
- 苏宁大数据怎么运营_18个“硬核”数据告诉你,苏宁大数据如何火力全开护航618!...
- python中json使用方法总结_python中的json总结
- 谭浩强c语言入门_计算机学生为什么学不会C语言?看到这4点原因,学生表示太真实...
- c语言显示数字p1=0x5b,模拟计算器数字输入及显示
- lock是悲观锁还是乐观锁_图文并茂的带你彻底理解悲观锁与乐观锁