How to style an input type=”file” button with CSS?

Sometimes, we want to style an input type="file" button with CSS.

In this article, we’ll look at how to style an input type="file" button with CSS.

How to style an input type="file" button with CSS?

To style an input type="file" button with CSS, we can wrap a container around the file input and style that.

For instance, we write

<label class="custom-file-upload">
  <input type="file" />
  Custom Upload
</label>

to wrap a label around the file input.

Then we write

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

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

to hide the file input with

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

Then we add some border, padding and cursor styles to the label element with

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

Conclusion

To style an input type="file" button with CSS, we can wrap a container around the file input and style that.