Question

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

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

但这有一个浏览按钮，我想将其更改为可能的div标签，因此它只是一个可点击的元素。我不想看到旁边出现文字的默认浏览按钮。

是否有一种css方式可以改变它，所以我没有看到按钮，但我仍然可以点击它，或者我只需要隐藏它，然后点击其他东西只需手动点击它，点击时？

Answer 1

<input type="file" id="files" name="files[]" multiple style="display:none"/>
<label for="files">Click Here</label>

适用于chrome，IE11，Firefox 27.no js

Answer 2

以下是我通过使用标签包装输入的方式：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;
  }    
}

Answer 3

这可能会有所帮助

我也创造了一个小提琴 http://jsfiddle.net/S2jht/

在这里我们使用一行javascript（并且没有jquery）将相同的函数添加到div中

document.querySelector('#fileSelect').addEventListener('click', function (e) {
// Use the native click() of the file input.
document.querySelector('.filer').click();
}, false);

并使用css display:none

隐藏默认输入按钮

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

3 个答案:

HTML

SCSS