I’ve seen a lot of people ask how to 1.) apply custom styles to a <input type="file"> and 2.) programmatically open the browser’s file dialog with JavaScript. Turns out, the first is a cinch WebKit. The second comes with a couple of caveats.

If you want to skip ahead, there’s a demo.

Custom file inputs in WebKit

The first example on that demo page shows how to style your basic file input into something great. To achieve magnificence, we start with some standard issue markup:

<input type="file" class="button" multiple>

followed by some semi-rowdy CSS that to hide the ::-webkit-file-upload-button pseudo-element and create a fake button using :before content:

.button::-webkit-file-upload-button {
visibility: hidden;
}
.button:before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.button:hover:before {
border-color: black;
}
.button:active:before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Reference:

Since this one is only available in WebKit, I’ve left out the other vendor prefixes.

Programmatically opening a file dialog

No browser that I know of lets you simulate a manual click on a file input without user intervention. The reason is security. Browsers require that a user make an explicit manual click (user-initiated click) somewhere on the page. However, once that happens, it’s straightforward to hijack the click and route it to a file input.

My second technique (see this tweet) for styling a file input works across the modern browsers. It requires a bit of extra markup but allows us to “send” the user’s click to a file input.

The trick is to hide the <input type="file"> by setting it to visibility: hidden; and subbing in an extra <button> to hand the user’s actual click:

<style>
#fileElem {
/* Note: display:none on the input won't trigger the click event in WebKit.
  Setting visibility: hidden and height/width:0 works great. */
visibility: hidden;
width: 0;
height: 0;
}
#fileSelect {
/* style the button any way you want */
}
&lt;/style&gt;

&lt;input type="file" id="fileElem" multiple&gt;
&lt;button id="fileSelect"&gt;Select some files&lt;/button&gt;

&lt;script&gt;
document.querySelector('#fileSelect').addEventListener('click', function(e) {
// Use the native click() of the file input.
document.querySelector('#fileElem').click();
}, false);
</script>

Reference:

You’ll be even cooler if you use custom events:

function click(el) {
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
}

document.querySelector('#fileSelect').onclick = function(e) {
// Simulate the click on fileInput with a custom event.
click(document.querySelector('#fileElem'));
};

Caveat

Most browsers require the fileInput.click() to be called within 1000ms of the user-initiated click. For example, waiting 1.5s will fail because it’s too long after the user initiates a click:

document.querySelector('#fileSelect').onclick = function(e) {
setTimeout(function() {
  document.querySelector('#fileElem').click(); // Will fail.
}, 1500);
};

The cap gives you the chance to call window.open, adjust UI, whatever before the file dialog opens.

Live demo