file控件样式

来源：互联网发布：sas编程演义编辑：程序博客网时间：2024/06/15 17:42

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>

这里写图片描述
图标链接下载地址：
这里写链接内容

0 0