展会信息港展会大全

css Input file 文件选择框美化 支持Firefox
来源:互联网   发布日期:2016-03-25 16:31:22   浏览:1791次  

导读:在ff2,ie7,ie6下测试通过,这款css教程 input file 文件选择框美化 支持firefox效果我想很不错的。代码如下复制代码 <!doctype ...

在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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港