Add CSS style to input type=file | Custom file input

In this article, we will see how we can create a custom file input by styling the input field of type='file' using CSS.

To build a button/field to upload files and images we most commonly use the input field and set the type attribute to file.

<input type="file">

We get an output like this on our webpage.

Next, we will style the input field using CSS to make it look like a button.

To hide the default "choose file" button, we will use the ::file-selector-button pseudo selector.

input::file-selector-button {
  visibility: hidden;
}

/* Chrome, Edge & Safari */
input::-webkit-file-upload-button {
  visibility: hidden;
}

The ::file-selector-button pseudo selector is used for representing an input field with type="file".

Note: If you are using an older version of WebKit browsers like chrome, opera, or safari, you have to use a non-standard pseudo-element ::webkit-file-upload-button.

Now once that is done, we can add a class to the input field and add some CSS styles

input::file-selector-button {
  visibility: hidden;
}

.input-upload {
  color: transparent;
}

.input-upload::before {
  content: "Select some files";
  display: inline-block;
  background: yellowgreen;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  cursor: pointer;
  color: black;
}

So the result of the CSS will be like this

DEMO CODE:

<a href="https://codesandbox.io/s/input-styling-tficc0?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit input-styling" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>

So, this is how you can create a custom file input for your HTML form using CSS styling.