file控件样式

最新推荐文章于 2021-08-03 18:46:53 发布

原创最新推荐文章于 2021-08-03 18:46:53 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#file控件样式美化

.net 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种通过CSS隐藏原始file控件并自定义样式的技巧，使文件上传界面更加美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>