How Can I Style File Upload Buttons in Twitter Bootstrap?

Styling File Upload Button in Twitter Bootstrap

It's surprising that Twitter Bootstrap lacks an aesthetically pleasing upload button. The question arises if this element can be customized using CSS.

Customization Using HTML and CSS

For Bootstrap 3, 4, and 5, a functional file input control that resembles a button can be created with HTML alone:

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

This approach leverages the hidden attribute in HTML5. For browsers that don't support this attribute, ensure you include the following CSS:

[hidden] {
  display: none !important;
}

Legacy Approach for Older IE

To support IE8 and earlier, HTML/CSS modifications are required:

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

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

This CSS addresses issues with old IE by making the file input full-width/height within the and invisible.

The above is the detailed content of How Can I Style File Upload Buttons in Twitter Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!