HTML Form How to - Style inputs of type file to be a button

Question

We would like to know how to style inputs of type file to be a button.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div.upload {<!--from   w  w w  .  j  a  va 2s.co  m-->
  width: 157px;
  height: 57px;
  background:url(https://placehold.it/50x50);
  overflow: hidden;
}

div.upload input {
  display: block !important;
  width: 157px !important;
  height: 57px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
</style>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
      <input type="file" name="upload" />
    </div>
  </form>
</body>
</html>

The code above is rendered as follows: