文件上传按钮内的输入组图标答案

【问题标题】：Input group icon inside file upload button文件上传按钮内的输入组图标
【发布时间】：2017-11-29 13:57:02
【问题描述】：

我试图让输入组成为一个文件上传按钮，里面有一个图标。我尝试了以下方法：

<div class="row">
  <div class="col-xs-10 col-md-6">
    <div class="form-group">
      <label>File</label>
      <div class="input-group">
        <span class="input-group-btn">
          <button type="button" class="btn btn-secondary">+</button>
        </span>
        <input type="text" class="form-control" />
        <i class="input-group-btn fa fa-picture-o">
            <input type="file" class="btn btn-secondary" />
        </i>
      </div>
    </div>
  </div>
</div>

没有成功...这是plunker。我想要的是一个像左边那样的按钮，但里面有一个图标和文件上传功能。

请注意，我需要它在 Bootstrap 4 上工作

【问题讨论】：

如果没有 <input type="file"> 的 JS 替换，这是不可能的。 CSS 在该输入类型上可以更改和不能更改的内容受到限制。
@RobertC 不正确，我可以用 bootstrap 3 来做
可能想了解 Bootstrap 4 如何处理它自己的内置自定义文件浏览器：v4-alpha.getbootstrap.com/components/forms/#file-browser
@RobertC 谢谢，我搞定了！
如果您选择不使用 V4 自己的自定义文件浏览器，您应该在答案框中发布您自己的解决方案，以确保未来的访问者可以找到解决方案。

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

我已经成功添加了以下css：

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    opacity: 0;
    outline: none;
    background: #fff;
    cursor: pointer;
    display: block;
}

并构建我的 html：

   <div class="form-group">
      <label>File</label>
      <div class="input-group">
        <span class="input-group-btn">
          <button type="button" class="btn btn-secondary">+</button>
        </span>
        <input type="text" class="form-control" />
        <span class="input-group-btn"><span class="btn btn-secondary btn-file"><span class="fa fa-picture-o"></span>
          <input type="file" accept="image/png, image/jpeg, image/gif"/></span></span>
      </div>
    </div>

见plunker here

【讨论】：