Skip to content
Fix Code Error

Twitter Bootstrap Form File Element Upload Button

March 13, 2021 by Code Error
Posted By: Anonymous

Why isn’t there a fancy file element upload button for twitter bootstrap? It would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload button using CSS? (seems like a native browser element that can’t be manipulated)

Solution

Here’s a solution for Bootstrap 3 and 4.

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/

Answered By: Anonymous

Related Articles

  • Is CSS Turing complete?
  • laravel vuejs/axios put request Formdata is empty
  • Adding Dynamic Input Fields With VueJs
  • How would I be able to multiple select and pass data in the…
  • Keras Sequential API is replacing every layer with abstract…
  • How to add 'load more' functionality to items on a page with…
  • Form field border-radius is not working only on the last…
  • Adding a UserCreationForm to html in Django
  • VueJS how to rerender a component
  • How do I limit the number of digits from 6 to 4 in JS?…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Copy tables from one database to another in SQL Server

Next Post:

How to merge a specific commit in Git

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error