Twitter bootstrap 文件上载按钮内的输入组图标

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

<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>

文件
+

没有成功。。。这是你的电话号码。我想要的是一个按钮，就像左边的按钮一样，但里面有一个图标和文件上传功能

---

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

我成功地添加了以下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>

文件
+

---

请参见

如果没有JS替换

，这是不可能的。CSS在该输入类型上只能更改，不能更改。@RobertC这不正确，我可以用bootstrap 3来更改。我可能想了解bootstrap 4如何在自定义文件浏览器中处理它自己烘焙的内容：@RobertC谢谢，我让它工作了！如果您选择不使用V4s自己的自定义文件浏览器，您应该在应答框中发布自己的解决方案，以确保将来的访问者能够找到解决方案。