How to Customize File Inputs

It is possible to customize the <input type="file"> using a <label>. This is a great solution as clicking a <label> focuses the bound input and opens the file dialog without requiring JavaScript.

In this snippet, we’re going to show how you can customize a file input without JavaScript.

Create HTML

Use a <label> tag with a class name "label".
Add an input type "file".
Add a <span> element.

How to Customize File Inputs - Create HTML

<label class="label">
  <input type="file" required/>
  <span>Select a file</span>
</label>

Add CSS

Use the position and opacity properties for the label.label input[type="file"].
Style the "label" class using the cursor, border, border-radius, padding, margin, and background properties, and add display.
Add the :hover and :active pseudo-classes to the "label" class and add background.
Add the :invalid and :valid pseudo-classes to the input element and target the adjacent span to set color.

How to Customize File Inputs

label.label input[type="file"] {
  position: absolute;
  opacity: 0;
}
.label {
  cursor: pointer;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 5px;
  background: #dddddd;
  display: inline-block;
}
.label:hover {
  background: #5cbd95;
}
.label:active {
  background: #9fa1a0;
}
input:invalid+span {
  color: #000000;
}
input:valid+span {
  color: #ffffff;
}

Here is the full code.

Example of customizing a file input:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label.label input[type="file"] {
        position: absolute;
        opacity: 0;
      }
      .label {
        cursor: pointer;
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding: 5px 15px;
        margin: 5px;
        background: #dddddd;
        display: inline-block;
      }
      .label:hover {
        background: #5cbd95;
      }
      .label:active {
        background: #9fa1a0;
      }
      input:invalid+span {
        color: #000000;
      }
      input:valid+span {
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get">
      <label class="label">
        <input type="file" required/>
        <span>Select a file</span>
      </label>
    </form>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <form action="/form/submit" method="post"> <label class="label"> <input required type="file"> <span>Select a file</span> </label> </form> </div>

In this example, first, we hide the input using opacity: 0 and position: absolute so it does not take up space in the document layout but still exists and can be activated with the label.

The CSS possibilities of an input file are limitless, so you can use several CSS properties once you understand how this method works.

Now, let's see another example, where we use the opacity, position, and z-index properties on the "upload".

Example of styling a file input:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        cursor: pointer;
        background-color: lightblue;
        color: #ffffff;
        padding: 10px 20px;
      }
      #upload {
        opacity: 0;
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get">
      <label for="upload">Upload a file</label>
      <input type="file" name="photo" id="upload" />
    </form>
  </body>
</html>

Try it Yourself »