Stylish file upload using <label> to active an off-canvas file input field Source: http://jsfiddle.net/rudiedirkx/8hzjP/10/

stylish-file-upload.css

#picture {
    position: absolute;
    left: -9999px;
}

label {
    cursor: pointer;
}

stylish-file-upload.html

<form>
  <label for="picture">Upload a Picture</label>
  <input type="file" name="picture" id="picture">
  <span id="filename"></span>
</form>

stylish-file-upload.js

$('#picture').change(function(e) {
  var filepath = this.value;
  var m = filepath.match(/([^\/\\]+)$/);
  var filename = m[1];
  $('#filename').text(' -> ' + filename);
  setTimeout((function(form) {
    return function() {
      form.submit();
    }
  })(this.form), 1000);
});