Adding style to file upload button in css

I tried this it looks pretty good to me. Are there any flaws with this? Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

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

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

Here are the images

You could also use jQuery, like this:

<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

And this jquery code

$("#image").click(function(){
 $("#photosubmit").click();
});

Hopes this helps someone too!

Try this solution: http://jsfiddle.net/JJRrc/1/

Html

<p class="form">
  <input type="text" id="path" />
  <label class="add-photo-btn">upload
    <span>
       <input type="file" id="myfile" name="myfile" />
    </span>
  </label>
</p>

CSS

.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: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});

try this:

In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button. This syntax is only for button style.

If you put there only: input[type="file"] you can style the array where you have filename.