styling html file input

<input type="file" class="custom-style" />

If you think making this input tag look pretty is simply a matter of some CSS, think again.

problem

The file input element is ugly and every browser displays it a little bit differently. Unfortunately, CSS can only style some things about this element, and I usually want more.

The best solution to achieve a custom style is to create a new element (a button perhaps) that when clicked triggers the click event on this input element.

That works in most every browser.

IE FTW

IE does not appreciate fake click events on file input elements. You will get a security error if the user did not actually click on the file input element.

Grrrr

solution

Invisibly hover the actual file input element over the pretty styled button.

<div class="file-input-wrapper">
  <button class="btn-file-input">Upload File</button>
  <input type="file" name="file" />
</div>
<style>
  .file-input-wrapper {
    width: 200px;
    height: 40px;
    overflow: hidden;
    position: relative;
  }
  .file-input-wrapper > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
  }
  .file-input-wrapper > .btn-file-input {
    display: inline-block;
    width: 200px;
    height: 40px;
  }

You can play with this setup on JSFiddle
http://jsfiddle.net/supershabam/b3WXe/

Key parts:

• wrapper sets width and height
• wrapper overflow hidden
• file input has font-size set very high
• file input positioned to the top right of the wrapper
• file input is made invisible by setting opacity