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">
   <div>Upload</div>
   <input id="file-input1" type="file"></input>
</div>

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.