file控件样式

file控件属于基本常用的控件之一，但是样式不美观，如何制作一个好看一点的样式呢？现在介绍常用的一种方法：

通过定义file样式，使得观察者看不到原来file，即隐藏file控件

Css样式

.abtn{ display:inline-block; margin:0 7px; padding:4px 12px;    line-height: 20px; border-radius:4px; vertical-align: top;  font-size: 12px; cursor:pointer; color:#fff !important; text-decoration:none; border:1px solid #2b77f5; border-bottom-color: #0057e8; background:#4a8eff; background:-moz-linear-gradient(top, #4a8eff, #4486f5); background:-webkit-linear-gradient(top, #4a8eff, #4486f5); }
.ainput_file{ position: relative; font-size: 13px; overflow: hidden; _zoom:1; _display: inline; }
.ainput_file em{ background:url(document_a4_upload.ico) 0 2px no-repeat; width: 16px; height: 20px; overflow: hidden; margin-right: 5px; line-height: 20em; vertical-align: middle; float: left;}
.ainput_file span{ float: left;}
.ainput_file input{ outline: none; display: block; position: absolute; top: 0; left: 0; *left:-3px; width: 100%; _width:100px; height: 100%; overflow: hidden; font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity: 0; /* 实现的关键点 */
filter:alpha(opacity=0);/* 兼容IE */
}
.filename{display: inline-block; _zoom:1; _display: inline; line-height: 20px; font-size: 12px; padding: 4px 0; width: 80px;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}

HTML

<a href="#"  class="abtn ainput_file"><em>+</em><span>添加附件</span>
<asp:FileUpload    ID="FileUpload1" runat="server" onchange="filechange()" />
</a>

图标链接下载地址：

这里写链接内容