Question

display:none takes the element away from the layout flow and thus not taking up space on the page but its events get disabled.

visibility:hidden hides the element, but the element still takes up space.

I need a way to hide a file input element without taking up space and responding when I call its .click() event.

Example

Answer 1

Simply setting opacity to 0 should work. The element won’t show up, and it wont take space either. And its events will work.

When giving opacity, also specify the opacity counterparts of all browsers (-moz.., -webkit, filter: ..) etc.. to ensure cross-browser compatibility.

EDIT

Your style should look something like:

.mydiv {
  position: absolute;
  left: 10px; /* change as needed */
  top: 10px; /* change as needed */
  opacity: 0;
}

Working demo here: http://jsfiddle.net/t2BHg/6/