具有映像的Bootstrap输入组

Question

我正在使用引导程序3创建带有普通文本的输入组，如下图所示

如何获取包含图像以及超过2个跨度文本的输入组。

我在普通输入组中使用以下代码

<div class="input-group input-group-lg">
  <input type="text" style="background-color: black; color: white" class="form-control" aria-label="You Send">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <!-- /btn-group -->
</div>
<!-- /input-group -->

编辑1：

Answer 1

有很多CSS技巧可以将图像嵌入到输入字段中。就我个人而言，如果我们要使用Bootstrap，那么让我们真正使用Bootstrap。也许还有像FontAwesome这样的图标包。

.search-icon:before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f002";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text border-right-0 bg-white">
    <!-- Stack overflow doesn't allow this, but if it did, I would not need
         any custom  css, just the following html only this: 
    <i class="fas fa-search"></i>
    Instead I have to use this over here. -->
      <span class="search-icon"></span>
    </span>
  </div>
  <input type="text" class="form-control border-left-0" placeholder="Search">
</div>

如果您想放置自己的自定义图片，可以像这样编辑css：

.search-icon:before {
  content: url(path/to/your-image.jpg);
}

弄清楚两段文字的含义后，我将更新我的答案。