Styling a File Input Button with Materialize

Updated Version

There is an updated version of this article here:


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


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

<link href="" rel="stylesheet"><link rel="stylesheet" href="">

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">




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation