浏览按钮上的CSS

Question

我想在浏览按钮上应用css，下面的代码工作正常但是如果我在Facefile div中移动这段代码它不能完美：

/*Browse Button CSS Starts*/
#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.gif) 100% 0px no-repeat;
    height:26px;
    width:240px;
}

#FileField {
    width:155px;
    height:22px;
    margin-right:85px;
    border:solid 1px #000;
    font-size:16px;
}

#BrowserHidden {
    position:relative;
    width:240px;
    height:26px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
/*Browse Button CSS Ends*/
<div id="FileUpload">
    <input type="file" size="14" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible">
    <input type="text" id="FileField" />
    </div>
</div>

使用Facefile div（Facefile是一个jQuery Overlay插件）

<!-- Facefile Starts -->
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})
</script>
<!-- Facefile Ends -->
<div id="se" style="display:none; width:600px; margin:auto;">
    <div id="FileUpload">
    <input type="file" size="14" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible">
    <input type="text" id="FileField" />
    </div>
</div>