日期:2014-05-16  浏览次数:20315 次

上传文件自定义样式问题
HTML code

<div class="fileupload">
    <a href="javascript:;" class="add_btn">添加附件</a>
    <div class="fileupload_div" onclick="upfile_click(this)">
        <asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileupload_input"/>
    </div>
</div>
<style>
.fileupload{
    position:relative;
}
.fileupload_div{
    filter: alpha(opacity=0);
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    background-color:black;
    cursor:pointer;
    height:16px;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:72px;
    margin-left:10px;
}
.fileupload_input{
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}
</style>


我想实现像163邮箱那样的上传附件功能,照样复制了一部分样式,实现了隐藏系统上传框,改为自己定义的链接
现在遇到了问题,点击链接没有弹出选择文件,看了一下,是把上传文件的那个input设置成了hidden;(设置成hidden就不能响应鼠标事件)去掉visibility: hidden;就可以了,但这不是我想要的效果,因为这样,file框就在最上层了,外层的div不能显示设置好的鼠标形状,而那个文件选择框又不能设置鼠标样式(chrome无效,ie6有效),难道还有什么没copy到的?

------解决方案--------------------
不要用hidden 通过设置透明度将其隐藏