Styling a File Input Button with Materialize

Image by Mystic Art Design from Pixabay

Updated Version

There is an updated version of this article here:

Styling a File Input Button with Materialize

Scenario

We have a <input type=”file”> button and we want to style it with Materialize.

Approach

First add Materialize and Material icons to the index.html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

Then add the following custom 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;
}

And declare the button:

<span class="btn btn-file">
    <i class="material-icons left">cloud_upload</i>
    Browse<input type="file">
</span>

Demo