File input's appearance of our own

HTML

<div class="file">
  ファイルを選択
  <input type="file"/>
</div>

CSS

.file {
  display: inline-block;
  overflow: hidden;
  position: relative;
  padding: .5em;
  border: 1px solid #999;
  background-color: #eee;
}

.file input[type="file"] {
  /* opacity: 0; */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  font-size: 100px;
  cursor: pointer;
  background: rgba(50,0,22,.4);
}