CSS on Browse button

[txbritt]

I want to apply css on browse button, the below code works fine but if I move this code in a Facefile div it does not works perfect:\[code\]/*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 = http://stackoverflow.com/questions/4976670/getElementById('BrowserHidden').value;" /> <div id="BrowserVisible"> <input type="text" id="FileField" /> </div></div>\[/code\]with Facefile div(Facefile is a jQuery Overlay plugin)\[code\]<!-- Facefile Starts --><script src="http://stackoverflow.com/questions/4976670/facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script><link href="http://stackoverflow.com/questions/4976670/facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" /><script src="http://stackoverflow.com/questions/4976670/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 = http://stackoverflow.com/questions/4976670/getElementById('BrowserHidden').value;" /> <div id="BrowserVisible"> <input type="text" id="FileField" /> </div></div>\[/code\]