w3docs logo
  1. Snippets
  2. CSS
  3. How to Style the HTML File Input Button with CSS

How to Style the HTML File Input Button with CSS

Today’s task is to create and style file input without any JavaScript code. We're going to demonstrate a tricky way of creating and styling a file input with HTML and CSS. Let’s build an example and see how it works.

Create HTML

  • Create <div> element with a class name "container".
  • Create another <div> with a class name "button-wrap".
  • Create a <label> tag with for linked to the input tag id.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div class="container">
      <div class="button-wrap">
        <label class="button" for="upload">Upload File</label>
        <input id="upload" type="file">
      </div>
    </div>
  </body>
</html>

Add CSS

  • Set the display of the "container" class to "flex"and set both the align-items and justify-content properties to "flex-start". Aslo add the width property set to "100%".
  • Style the input by specifying the color, font-size, top, and left properties. Set the position to "absolute" and specify z-index.
  • Set the position to "relative" for the wrapper so as the element is placed relative to its normal position.
  • Set the display of the "button" class to "inline-block" so as the element displays as an inline-level block container.
  • Set the color of the text and the background-color of the button.
  • Set the padding. The first value sets the top and bottom sides and the second one sets the right and left sides.
  • Make a little bit rounded corners for the outer border edge of the button with the border-radius property.
  • Set the font-size and the thickness of the font with the font-weight property.
.container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

input[type="file"] {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b8b8b8;
}

.button-wrap {
  position: relative;
}

.button {
  display: inline-block;
  padding: 12px 18px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #8ebf42;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

So, here’s our custom file input with pure CSS.

Example of styling the file input button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
      }
      input[type="file"] {
        position: absolute;
        z-index: -1;
        top: 10px;
        left: 8px;
        font-size: 17px;
        color: #b8b8b8;
      }
      .button-wrap {
        position: relative;
      }
      .button {
        display: inline-block;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: 5px;
        background-color: #8ebf42;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="button-wrap">
        <label class="button" for="upload">Upload File</label>
        <input id="upload" type="file">
      </div>
    </div>
  </body>
</html>

Result

Another beautiful example with the :hover pseudo-class.

Example styling the file input button with the :hover pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
      }
      input[type="file"] {
        position: absolute;
        z-index: -1;
        top: 15px;
        left: 20px;
        font-size: 17px;
        color: #b8b8b8;
      }
      .button-wrap {
        position: relative;
      }
      .button {
        display: inline-block;
        background-color: #1d6355;
        border-radius: 10px;
        border: 4px double #cccccc;
        color: #ffffff;
        text-align: center;
        font-size: 20px;
        padding: 8px;
        width: 100px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }
      .button:hover {
        background-color: #00ab97;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="button-wrap">
        <label class="button" for="upload">Upload File</label>
        <input id="upload" type="file">
      </div>
    </div>
  </body>
</html>
Do you find this helpful?