a shot of dev knowledge

RELATED TAGS

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

An ordinary input of the file type in HTML

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

There are three steps to this:

1. Wrap the input file inside a label element

<label for="inputTag">
  Select Image
  <input id="inputTag" type="file"/>
</label>

2. Change the display of the input tag to none

input{
  display: none;
}

3. Style the label element

Here, you can add more elements or icons. This is where the magic comes in.

label{
    cursor: pointer;
}

Code

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.

RELATED TAGS

RELATED COURSES

View all Courses

Keep Exploring