定义input type=file 样式的方法,使用一个text和一个button模拟
2012-09-27 09:33
288 查看
最外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>
相关文章推荐
- 定义input type=file 样式的方法,使用一个text和一个button模拟
- text-overflow样式属性值ellipsis的使用方法
- dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)
- 一个能让C#使用XP样式的方法
- 使用系统方法 创建一个 自定义样式的button
- 关于toast的使用方法总结,程序同一时刻只有一个toast,和toast的样式设置。
- C# 委托:把方法组合到一个数组中使用
- jquery之修改元素样式(添加和删除类名称,使用addClass(),removeClass(),toggleClass()方法)
- 在ie7下css居中样式text-align:center;偏左问题解决方法
- Android的TextView/EditText使用CharacterStyle&SpannableString来处理图片显示、字体样式、超链接等
- Microsoft JET Database Engine 错误 '80004005' 操作必须使用一个可更新的查询。解决方法
- TextView使用wrap_content设置高度,上下有间隔 去除的方法,两种
- 【iOS开发】 CoreText 使用教程:以创建一个简单的杂志应用为例
- MVC为Html对象建立一个扩展方法,使用自己的控件就像使用TextBox一样方便
- 一个小例子集合xlrd,matplotlib,numpy,scipy使用方法(从Excel导入数据)
- 【iOS开发-58】tableView初识:5个重要方法的使用和2种样式的差别
- 使用text方法获取Html元素文本信息示例
- 简述原型链是什么,有什么用处?若想访问一个对象的原型,应该使用什么方法?
- MVC2 Preview1使用每个area一个project的方法