2024年3月31日发(作者：)

表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不

统一，样式很难起作用；

通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。

HTML代码如下：

1

2

3

4

5

6

这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框

和按钮追加到html中。

注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input

type=”file”的宽度

CSS代码如下：

1 .type-file-box{ position:relative;width:260px}

2

3 input{ vertical-align:middle; margin:0; padding:0}

4

.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px

5

;}

6

.type-file-button{ background-color:#FFF; border:1px solid#CDCDCD;h

7

eight:24px; width:70px;}

8

.type-file-file{ position:absolute; top:0; right:0; height:24px;

9

filter:alpha(opacity:0);opacity: 0;width:260px }

注意：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。

层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”；

js代码：

1 $(function(){

var textButton="

2 class='type-file-text' />

id='button' value='浏览...' class='type-file-button' />"

3 $(textButton).insertBefore("#fileField")；

4 $("#fileField").change(function(){

5 $("#textfield").val($("#fileField").val());

6 );

7 );

这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了

demo演示：/demo/input-file/