Customize Browse button in jQuery

--------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myfile').change(function(){
$('#path').val($(this).val());
});
});
</script>

<div class="fileuploader">
  <p class="form">
    <input type="text" id="path" class="filename" readonly="readonly" style=' background:#fff; width:199px; border: 0px solid #FAFAFA;display:inline-block;' Placeholder="No file selected" />
    <label class="add-photo-btn">upload<span>
      <input type="file" class="filebutton" id="myfile" style='width:120px;display:inline-block; font-weight:normal !important; background:#fff;' name="myfile" />
      </span> </label>
  </p>
</div>

<style>
.form input[type="file"] {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: hand;
_cursor: hand;
margin: 0;
padding: 0;
left: 0;
}
.add-photo-btn:hover {
background-color: #000;
cursor: hand;
}
.add-photo-btn {
position: relative;
overflow: hidden;
cursor: hand;
text-align: center;
background-color: #83b81a;
color: #fff;
display: block;
width: 197px;
height: 31px;
font-size: 18px;
line-height: 30px;
float: right;
}
input[type="text"] {
float: right;
}
</style>



--------------------------------------------