Twitter Bootstrap Form File Element Upload Button

by

Here’s a solution for Bootstrap 3, 4, and 5.

To make a functional file input control that looks like a button, you only need HTML:

HTML

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy approach shown below.

This techniques relies on the HTML5 hidden attribute. Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers. You may need to add if you’re using Bootstrap 3.

[hidden] {
  display: none !important;
}

Legacy approach for old IE

If you need support for IE8 and below, use the following HTML/CSS:

HTML

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

CSS

.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;
}

Note that old IE doesn’t trigger the file input when you click on a <label>, so the The CSS “bloat” does a couple things to work around that:

  • Makes the file input span the full width/height of the surrounding <span>
  • Makes the file input invisible

Feedback & Additional Reading

I’ve posted more details about this method, as well as examples for how to show the user which/how many files are selected:

https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/

More Related Contents:

  1. Bootstrap height
  2. Vertical Align Center in Bootstrap 4 [duplicate]
  3. Twitter Bootstrap 3: how to use media queries?
  4. Bootstrap 3 fluid grid layout issues?
  5. Why did Bootstrap 3 switch to box-sizing: border-box?
  6. How can I get a Bootstrap column to span multiple rows?
  7. Font Awesome not working, icons showing as squares
  8. Get Two Columns with different background colours that extend to screen edge [duplicate]
  9. Twitter Bootstrap Multilevel Dropdown Menu
  10. How can I change the Bootstrap 4 navbar button icon color?
  11. Bootstrap with different order on mobile version
  12. Right to Left support for Twitter Bootstrap 3
  13. Search input with an icon Bootstrap
  14. Input widths on Bootstrap 3
  15. Bootstrap 3 – Use more than 12 columns in a row
  16. Twitter Bootstrap – add top space between rows
  17. Bootstrap dropdowns menus appearing behind other elements – IE7
  18. CSS Input with width: 100% goes outside parent’s bound
  19. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  20. Use Fieldset Legend with bootstrap
  21. How to use vertical align in bootstrap
  22. Bootstrap 4 card-deck with number of columns based on viewport
  23. Can I add color to bootstrap icons only using CSS?
  24. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  25. Remove border radius from Select tag in bootstrap 3
  26. how to change bootstrap version 4 button color
  27. Bootstrap drop down cutting off
  28. up/down arrow key issue with typeahead control (angular bootstrap UI)
  29. Custom CSS being overridden by Bootstrap CSS
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment