How to style an input of type file with CSS

In this article, we’ll learn how to style an input of type file, that is, the one that sends files to a back-end server in an HTML form.

How to style an input of type file cover

What’s up, programmer, okay? Let’s learn one more new thing!

Watch this content on YouTube:

You who are entering this topic must have racked your brain for a long time, and discovered that the input of the type file is not easily stylizable

Maybe minimal changes are possible, but it doesn’t get the way we want

So let’s see how to perform this action of styling an input type file, easily

First look at our example HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Como estilizar um input do tipo file</title>
 </head>
 <body> 
   <h1>Envie o arquivo</h1>
   <form>
    <div>
     <label for="arquivo">Enviar arquivo</label>
     <input type="file" name="arquivo" id="arquivo">
    </div>
   </form>
 </body>
</html>

This is the return in the browser:

How to style an input of type file example

Now for the explanations, we have a form with the input of file, but we create the element label that is destined for that input, for the for

Want to specialize in Web Development? See our course catalogue.

The big move here is that by clicking on the label, the input is also triggered, so this gives us an opportunity

We can omit the file field, and style the label with for, which easily takes CSS styles

That way we’ll have a good result, making the input work normally, check it out:

body {
 font-family: Helvetica;
}

input[type="file"] {
 display: none;
}

label {
 padding: 20px 10px;
 width: 200px;
 background-color: #333;
 color: #FFF;
 text-transform: uppercase;
 text-align: center;
 display: block;
 margin-top: 10px;
 cursor: pointer;
}

We added this CSS and the result is very satisfactory, we were able to style the label the way we needed

And the input continues to work normally: