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, software developer, Linux and open-source fan, blogger.
This entry was posted in HTML and tagged , . Bookmark the permalink.

One 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s