自定义input[file]（文件上传控件）样式-兼容IE6

最新推荐文章于 2020-12-01 16:40:23 发布

夜行孙

最新推荐文章于 2020-12-01 16:40:23 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：其它文章标签： input html file 文件上传

本文链接：https://blog.youkuaiyun.com/inweb/article/details/12849955

其它专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何自定义文件上传控件的样式，并提供了更精细的处理方式，确保兼容IE6浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义文件上传控件样式（兼容 IE6）</title>
<link href="/min/b=wp-content/themes/mangguo/css&f=reset.css,example.min.css" rel="stylesheet" />
<style>
.input-file {
	display:inline-block;
	width:100px;height:30px;line-height:30px;
	background:#eee;
	text-align:center;overflow:hidden;position:relative;
}
.input-file:hover {background:#ccc;}
.input-file input {
	opacity:0; filter:alpha(opacity=0);
	font-size:100px;position:absolute;top:0;right:0; 
	cursor:pointer;
}
</style>
</head>
<body>
	<span class="input-file">浏览...<input type="file"></span>
	<a href="javascript:void(0);" class="input-file">浏览...<input type="file"></a>
</body>
</html>

更精细的处理：http://www.quirksmode.org/dom/inputfile.html