How to customize file input with CSS?

Spread the love

Sometimes, we want to customize file input with CSS.

In this article, we’ll look at how to customize file input with CSS.

How to customize file input with CSS?

To customize file input with CSS, we can hide the input.

For instance, we write

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

to add a label for the file input.

Then we write

label {
  cursor: pointer;
}

#upload-photo {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

to style the label.

And we hide the file input by setting its opacity to 0.

Conclusion

To customize file input with CSS, we can hide the input.

Leave a Reply

Your email address will not be published.