Styling an input type=“file” button

Question

How do you style an input type=\"file\" button?

Answer 1

If you are using Bootstrap 3, this worked for me:

See http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

    Browse...

Which produces the following file input button:

Seriously, check out http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/