1. Snippets
  2. ›
  3. CSS
  4. ›
  5. How to Style HTML File Input Button with CSS

How to Style HTML File Input Button with CSS

Today’s task is to create and style file input without any JavaScript code. We are going to show a tricky way to create and style file input with HTML and pure 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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type="file"] {
        position: absolute;
        z-index: -1;
        top: 10px;
        left: 8px;
        font-size: 17px;
        color: #b8b8b8;
      }
    </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>
  • Set the position to "relative" for the wrapper so as the element is placed relative to its normal position.
.button-wrap {
  position: relative;
}
  • Set the display 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.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .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>

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>

Another beautiful example with :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>

Related Resources

Do you find this helpful?

Related articles