Входная группа начальной загрузки с изображением - PullRequest
Новая
       16

Входная группа начальной загрузки с изображением

0 голосов
/ 16 ноября 2018

Я использую загрузчик 3 для создания групп ввода с обычным текстом, как показано на рисунке ниже enter image description here

Как я могу получить группу ввода с изображением, а также с более чем 2-х сторонним текстом.

enter image description here

Я использую следующий код для нормальной группы ввода 

<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: This is the requirement.

1 Ответ

0 голосов
/ 16 ноября 2018

Существует множество хитростей 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);
}

Я обновлю свой ответ, как только вы уточнить, что вы подразумеваете под двухпролетным текстом.

...