CSS HTML

How to style an input of type file with CSS

November 20, 2021

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!

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:

Then we reach the end of this tutorial, reaching the proposed objective.

Conclusion

In this article, we learned how to style a file-type input

Not it actually, but a label that will represent this input

Because the input of type file doesn’t receive styles like other HTML elements do, so we need to use this technique

Want to learn more about CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x