自定义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 中：

自定义input[type=file]的兼容样式相关推荐

自定义input type=file 样式的方法
为什么80%的码农都做不了架构师?>>> 为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了. 原始的file控件是这样的: &l ...
html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明将inp ...
input type=file选择图片按钮样式修改与图片预览
1 背景通过上图我们可以看到input type=file按钮的默认样式,非常不美观,如果要自定义该按钮的样式,要如何实现呢? 2 方式1样式 input覆盖整个按钮区域,并且设置完全透明 < ...
input[type=file]去掉“未选择任何文件”及样式改进
原文地址:input[type=file]去掉"未选择任何文件"及样式改进 - 腾讯云开发者社区-腾讯云 input 标签的 file 属性,在没有选择文件的情况下,默认显示一条文 ...
css input[type=file] 样式美化，input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...
使用自定义的按钮替换默认的input type='file'
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){$.fn.brows ...
自定义 input[type=checkbox]的样式
自定义 input[type="checkbox"]的样式对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框 ...
html选择文件按钮美化,css input[type=file] 样式美化，input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
利用css对input[type=file] 样式进行美化，input上传按钮美化
2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...

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

自定义input[type=file]的兼容样式相关推荐

最新文章

热门文章