Question

我试图让输入组成为一个带有图标的文件上传按钮。我尝试过以下方法：

<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上运行

Answer 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

在文件上传按钮内输入组图标

1 个答案: