javascript - 如何将html5输入按钮转换为div标签？

Question

在我的 html5 代码中，我使用这个标签来选择要读取的文件。

<input type="file" id="files" name="files[]" multiple />

但这有一个浏览按钮，我想将它更改为一个可能的 div 标签，这样它就只是一个可点击的元素。我不想看到旁边显示文本的默认浏览按钮。

有没有一种 css 方法可以改变它，所以我看不到按钮，但我仍然可以点击它，或者我只需要隐藏它，让其他东西可以点击，只需手动点击它，当点击了吗？

Answer 1

这是我一直以来使用标签包装输入的方式:fiddle

HTML

<label for="upload-file" class="upload-wrapper">
    <input id="upload-file" type="file" />
    <img src="http://www.wikiprogress.org/images//Icon_UploadPapers.png" alt="" />
</label>

SCSS

.upload-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: .5;
    &:focus {
      outline: 0;
    }
  }
  max-width: 10em;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  &:hover, &:focus {
    border: 3px solid red;
  }    
}