表单中的input type=”file”在Tian开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；
通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。
HTML代码如下：
[code=”html”]
[/code]
这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。
注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input type=”file”的宽度
CSS代码如下：
[code=”css”]
.type-file-box{ position:relative;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);opacity: 0;width:260px }
[/code]
注意：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”；
js代码：
[code=”javascript”]
$(function(){
var textButton=” ?”
$(textButton).insertBefore(“#fileField”)；
$(“#fileField”).change(function(){
$(“#textfield”).val($(“#fileField”).val());
);
);[/code]
$(function(){
var textButton=” ?”
$(textButton).insertBefore(“#fileField”)；
$(“#fileField”).change(function(){
$(“#textfield”).val($(“#fileField”).val());
);
);[/code]
这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了
![[2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器-WEBTian开发](/newimg88/2018/12/CSS-220x150.png)
test 2周前 (12-26)说：
龙 3周前 (12-22)说：
leec 3周前 (12-19)说：
yazaky 3周前 (12-17)说：
zhou 4周前 (12-14)说：
一了个头 4周前 (12-14)说：
之前看美工这么玩过，使file变的很漂亮了。
前几天在一个OA上正好看到这个效果，今天看见码头做的 ～正好学习下～
哈哈！
请交学费谢谢！
好效果
就是鼠标形状除了ie都没办法改变
file对象感觉是比较失败的一个东西，操作起来很不方便，界面调整一下还可以，但功能太糟糕，这方面一些第三方控件做的好一些，比如image uploader，abcuploader(名字记不清了)
码头，IE6下是不行的，不信你看看。。。
@Kevin,
可以呀，很一致的说
可惜在ie6里还是有情况啊~~~~~~~~~~
照你上门的说的，不行啊。代码很多错的先不说。要想实现这效果还要把你演示网站里的 加上才行。求解决