定义input type=file 样式的方法，使用一个text和一个button模拟

最新推荐文章于 2021-06-21 08:16:01 发布

ldy592

最新推荐文章于 2021-06-21 08:16:01 发布

阅读量1.3k

点赞数

分类专栏： HTML ASP.NET 文章标签： input file

12 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

1.原理

基于安全性考虑，IE不支持用程序设置input type=file的值。

所以不能直接用<input type="text"/>和<input type="button"/>代替，

CSS美化file组件的方法是使用position属性将file组件置于<input type="text"/>和<input type="button"/>之上，

然后使其全透明化，操作时使用户感觉在操作<input type="text"/>和<input type="button"/>，实际上还是在操作file组件。

2.源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
.type-file-box {
<span style="color: #ff0000;">position:absolute;</span>
width:260px
}
input {
vertical-align:middle;
margin:0;
padding:0
}
.type-file-text {
height:22px;
border:1px solid #cdcdcd;
width:180px;
}
.type-file-button {
background-color:#FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
}
.type-file-file {
<span style="color: #ff0000;">position:absolute;</span>
top:0;
right:0;
height:24px;
filter:alpha(opacity:0);
width:260px
}
</style>
</head>
<body>
<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input type='text' name='textfield' id='textfield' class='type-file-text' />
<input type='button' name='button' id='button' value='浏览...' class='type-file-button' />
<input name="fileField" type="file" class="type-file-file" id="fileField" size="28" onchange="javascript:document.getElementById('textfield').value=this.value;"/>
</form>
</div>
</body>
</html>

3.注释

外层DIV的position属性不能省略。因为

1)absolute :

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

2)static :

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

4.参考资料

关注