css Input file 文件选择框美化 支持Firefox
在ff2,ie7,ie6下测试通过,这款css教程 input file 文件选择框美化 支持firefox效果我想很不错的。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="wuleying" />
<!--<script type="text/网页特效" src="ajax.js"></script>-->
<title>测试上传文件</title>
<style type="text/css">
* {font-size:12px;margin:0;}
body {background:#fff;}
form {margin:12px;}
input.file{
vertical-align:middle;
position:relative;
left:68px;
*left:-218px;
filter:alpha(opacity=0);
opacity:0;
z-index:1;
*width:223px;
display:none;
}
form input.viewfile {
z-index:99;
border:1px solid #ccc;
padding:2px;
width:150px;
vertical-align:middle;
color:#999;
}
form p span {
float:left;
}
form label.bottom {
border:1px solid #38597a;
background:#4e7ba9;
color:#fff;
height:19px;
line-height:19px;
display:block;
width:60px;
text-align:center;
cursor:pointer;
float:left;
position:relative;
*top:1px;
}
form input.submit {
border:0;
background:#380;
width:70px;
height:22px;
line-height:22px;
color:#fff;
cursor:pointer;
}
p.clear {
clear:left;
margin-top:12px;
}
p.filep {
height:25px;
}
p.clear input {
float:left;
margin-right:6px;
}
#error {
padding-top:5px;
color:#f00;
}
</style>
</head>
<body>
<form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
<input type="hidden" name="max_file_size" value="2097152" />
<input type="hidden" name="do" value="upload" />
<p class="filep">
<span>
<label for="viewfile">上传文件：</label>
<input type="text" onmouseo教程ut="document.getelementbyid('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
</span>
<label for="upload" class="bottom" onmouseover="document.getelementbyid('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getelementbyid('viewfile').value=this.value;this.style.display='none';" class="file" />
</p>
<p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
</form>
</body>
</html>
- 上一篇：精致404 错误页面
- 下一篇：CSS圆角背景与三角形实现技巧
