To Change FILE input button style

There is a Big Mess while changing style of FILE input button in HTML through CSS. below is a trick to do that. i had put File input button below a normal html button with opacity 0 so that File button hides beneath the normal button and on click of the normal button file input gets clicked. also adjust the Left:15px of file button to make it exact below the normal button.


<style>
#upload_button {    
     -moz-box-sizing: content-box;
    border-radius: 11px 11px 11px 11px;
    background-color: #F2F2F2;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 11px !important;
    line-height: 10px;    
    text-decoration: none;
    padding: 0px 14px;
    text-align: center;
    width: 72px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #BBBBBB;
    color: #464646;
   font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
#upload_button #my_files {  
 -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  position: absolute; 
  left:15px;
  width:100px;
}
#upload_button #pseudobutton{
  inherit: none;
  background-color:#F2F2F2;   
  width:69px;
  height: 19px;
  font-size:10px;
  /*position: absolute;*/
  border:none;  
 }
</style>

<div id="upload_button" >
<input type="button" id="pseudobutton" value="Open File">
<input type="file" name="my_files" id="my_files">
</div>