Customizing HTML file input style

Styling an HTML file input control is very cumbersome and the number of available options is quite limited. Moreover, each web browser renders this control differently which makes it difficult to have consistent view of the application between browsers. Here is how the HTML file input looks in Mozilla Firefox:

In most cases it is impossible to style the HTML file input control with CSS to obtain the wanted results. One of the easiest ways to overcome this issue is to place the HTML file input control visually on top of the other element (e.g. image or button) and make the HTML file input control transparent by setting opacity to zero. Because the HTML file input is on top, it will receive the click event and will open the dialog for choosing the file.

No JavaScript code is necessary, only HTML:

<div class="file-input-container">
   <input id="file-input1" type="file"></input>

and a bit of CSS:

.file-input-container {
  position: relative;
  width: 10em;
  height: 2em;
  background: #8ac007;
  border: 2px solid black;

.file-input-container > div {
  text-align: center;
  margin-top: 0.5em;

.file-input-container > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;

After the change the button for choosing the file will look more or less like this:

The provided example is easy to tune. For example you can completely remove child div element and set the background CSS property on parent div.


About Robert Piasecki

Husband and father, Java software developer, Linux and open-source fan.
This entry was posted in HTML and tagged , . Bookmark the permalink.

1 Response to Customizing HTML file input style

  1. Now you know how to set up a task!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.