Markup to Hide a File Input

file_input_example.css

.fake_file_input {
  background: url(../images/fake_file_input.png) no-repeat;
  cursor: pointer;
  width: 150px;
  height: 30px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.fake_file_input input {
  position: absolute;
  top: 0;
  left: -99999px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

/*
  Hack for Firefox:

*/

@-moz-document url-prefix() {
  .fake_file_input input {
    left: 0;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 30px;
  }
}

/*
  Degrade for IE6:
*/

* html .fake_file_input {
  background: none;
  cursor: default;
  overflow: visible;
  position: static;
  width: auto;
  height: auto;
}

* html .fake_file_input input {
  position: static;
  filter: alpha(opacity=100);
}

file_input_example.html

<label for="id_of_input" class="fake_file_input">
  <input type="file" id="id_of_input" />
</label>

Note: I'm not advocating that anyone should replace native form elements entirely. I actually think it's a pretty terrible idea. But, I've had several people ask me "Why doesn't Formalize 'style' file inputs?" — http://formalize.me — So I made this gist.

---

How this works:

Clicking the label with the for="…" attribute causes the visually hidden file input to receive focus.

Firefox doesn't like the input to be hidden (but it has to be, else IE7 & IE8 act weird), so we target Firefox specifically via…

@moz-document url-prefix()

…which tells the browser: "If this document has any URL, then do this."

Gross, I know.

---

Example here (not using a background image, just the color red)…

http://host.sonspring.com/_misc/file_input.html

Doesn't work in Opera :(

@jakearchibald — Really? Which version. Works for me in Opera 11.60.

Ack, I apologise. When I opened Opera again it triggered an update and now your example works. Sorry... however, I keep Opera up to date so I guess they've made a recent fix to labels of file elements.

Is there any way so show an indication of what file has been selected? Or even a visual cue that a file has been selected?

@xaptronic — Nope, no way to do that with just CSS (that I know of).

You'd need to read that out via JS. That's the way Uniform JS does it:

http://uniformjs.com

Cool thanks for the link.. maybe something could be baked into the various javascript support files to include something like this. I'll try it next time I use a file input.