Fancy File Inputs

Fancy File Inputs.js

var SITE = SITE || {};

SITE.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('Photo Chosen');
    if($fakeFile.length === 0) {
      $button.after('<span class="file-holder">' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};

$(document).ready(function() {
  $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
});

Markup.htm

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a Photo</span>
</span>

Style.css

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}
.file-wrapper .button {
  background: #79130e;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}

only issue is, I can't get the cursor:pointer to work on this.

Thank you.

cursor:pointer works well for me in IE, Opera, but not in Webkit based.

Amazing job indeed... well done

The only issue left is that is not possible have hover effect sop i did that with more jquery with css property

HELP!

On IE 9 does'nt work for me....

Big thanks for the gist!