How you can style the input file type in forms using CSS

Ordinary input of type file in webpages comes with a default style and the caption, “Choose file”. The good news is that we can style and tweak it to what we want.

<input type="file" accept="image/png, image/jpg, image/gif, image/jpeg"/>
A default view of the input file type on a web page

Styling the input file type

There are three steps to styling the input file in forms:

  1. Wrap the <input> element with the type="file" attribute inside a <label> element. Also, we can add more elements or icons within a <label> element.
<label for="inputTag">
Select Image
<input id="inputTag" type="file"/>
</label>
  1. Change the display of the input[type="file"] tag to none in CSS:
input[type="file"]{
display: none;
}
  1. Style the label element:
label{
cursor: pointer;
}

Code

Code example for styling the input file type in forms using CSS

Conclusion

We have looked at how to style the input file type that normally appears in a default “Choose file” format. One of these ways is to set the display to none. This way, we can style the label and add some icons.