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 {
position:absolute;
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 {
position:absolute;
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.参考资料
http://www.jb51.net/web/39559.html
http://www.w3school.com.cn/css/pr_class_position.asp
分享到：
相关推荐
主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file
关于type=file的input是啥？ 这个是啥我觉得没必要再说了，反正大家都知道，然后在现在有各种手机的时代，还可以通过直接拍照的方式来上传，反正比以前好玩多了。 并且以前是只能上传一个文件，现在的话，只要增加...
在日常重构中，form表单家族中的 upload field 在使用 css 美化时令人头疼！默认情况下，各个浏览器下的表现层次不齐,很是郁闷，于是本人搜集整理了一些常用技巧，需要了解的朋友可以参考下
浏览器自带的 input type="file" 不美观，我想做成如上图那样的形式： 思路是： - 把 `<input type="file"/>` 默认样式设置`display:none;`，即设为不可见 - 新建一个文本输入框`<input type="text"/>` 和 一个...
input id=subsubfolder1 type=checkbox /> <li class=file>下级</a></li> <label for=subsubfolder2>下级 <input id=subsubfolder2 type=checkbox /> <li class=file>无限级</a></li> <li class=file>...
用input本身的属性做的上传按钮，在不同的浏览器中长得都不一样。...input type="file" > css部分： <style> .div1 { position: relative; } .div2 { width: 100px; height: 36px; backgrou
上传控件input type='file' css 样式美化
文件上传input在各个浏览器里表现形式都不一样： ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的，在各种浏览器下表现一致的美化方法，效果如下： ...ie6无法美化，只能应用...input type=”file” class=”file-
css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32px; line-height: 35px; padding-left: 10px; margin-right: 25px; } .file{ float: right; outline: none; border:none; ...
input type=file d=file_input @change=importf(this) accept=.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel /> <div click=fileBtn>上传到服务器 <e
<input type="file" /> <input type="hidden" /><div style="display:none">test</div><br/> <input type="image" /> <input type="password" /> <input type="radio" name="a"/>1<input type=...
文章开始先告诉大家制作jquery实现简洁文件...input type=button name=file class=button value=Browse.../> <input type=file size=30/> css文件样式： .uploader{ position:relative; display:inline-b
input type="image" src=""/> * 普通按钮 type="button" 6、div和span * div: 自动换行 * span：在一行显示 CSS 1、css的简介 * css： 层叠样式表 ** 层叠：一层一层的 ** 样式表： 很多的属性和...
一款效果非常时尚的文件上传表单域美化特效，下面...input type=file name=file id=file class=inputfile /> <label for=file>Choose a file CSS样式 首先需要隐藏<input>元素。这里不能使用display: none
<input name="fileSize" type="hidden" id="fileSize"> <input name="format" type="hidden" id="format"> <td colspan="2" align="center"> <input name="Submit" type="submit" class="btn_grey" value=...
input type=file> 也是 CSS 啃不动的一块骨头，如果实在看不惯原生的样式，一般的做法是把文件选择域设为透明那个，覆盖在其他元素。 <div class=am-form-group> <button type=button class=am-btn am-btn-...