How Can I Customize the File Input Button in Twitter Bootstrap?

Customizing File Input Button in Twitter Bootstrap

In Twitter Bootstrap, the file input element lacks the sleek design of a button. However, there is a simple solution to create a customizable upload button using HTML.

Method:

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

This approach leverages the hidden HTML5 attribute to create a functional file input control that appears as a button. The button's style is inherited from the primary button class.

Legacy Approach for Old IE:

For browsers without hidden attribute support (e.g., IE8 and below), use this CSS and HTML:

HTML:

<span class="btn btn-primary 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;
}

This technique ensures compatibility with older IE versions.

Additional Information:

For further details and examples, refer to the comprehensive article at:

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

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