How Can I Create a Custom File Upload Button with Bootstrap?

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:

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

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:

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

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/

The above is the detailed content of How Can I Create a Custom File Upload Button with Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!