我们在程序开发中，经常要用到上传文件的功能。但是，<input type="file" id="f" name="f">这个类型的元素，产生的文件框和浏览按扭，它们的样式往往不符合我们的需要。怎么样才能控制控制它们的样式和位置呢？ 解决办法：使用text文本框及a链接模拟文件上传按钮，把文件上传按钮放在他们上面，并且文件上传按钮显示透明。 最终效果如下：
[HTML]代码 <div class="box">
<input type="text" name="copyFile" class="textbox" />
<a href="javascript:void(0);" class="link">浏览</a>
<input type="file" class="uploadFile" name="upload"
onchange="getFile(this,'copyFile')" />
</div>
[CSS]代码
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:14px Verdana, Arial, Geneva, sans-serif;
color:#404040;
background:#fff;
}
img {
border-style:none;
}
.main{
width:300px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-30px;
}
.box{
position:relative;
float:left;
}
input.uploadFile{
position:absolute;
right:0px;
top:0px;
opacity:0;
filter:alpha(opacity=0);
cursor:pointer;
width:276px;
height:36px;
overflow: hidden;
}
input.textbox{
float:left;
padding:5px;
color:#999;
height:24px;
line-height:24px;
border:1px #ccc solid;
width:200px;
margin-right:4px;
}
a.link{
float:left;
display:inline-block;
padding:4px 16px;
color:#fff;
font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
cursor:pointer;
background-color:#0099ff;
line-height:28px;
text-decoration:none;
}
</style>
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-13-1.html
|
