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>

@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.