Custom File Upload Button Using Bootstrap

While the default file input element in Twitter Bootstrap may lack aesthetic appeal, it is possible to create a custom button that mimics the appearance of the primary blue button.

Solution Using HTML:

For Bootstrap 3, 4, and 5, a straightforward HTML solution is available:

    Browse 

This hidden input element will function as a regular file input control while maintaining the custom button styling.

Legacy Approach for Older Browsers:

If you require compatibility with IE8 and below, use the following HTML/CSS combination:

HTML:

    Browse 

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

While this method involves additional CSS, it ensures compatibility with older IE browsers.

Additional Notes:

Please note that the hidden file input in the HTML solution relies on the HTML5 hidden attribute. If you require support for even older browsers, you can use the legacy approach.

For more information and examples on how to display the selected files, refer to the following resource:

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