DropDown使用HTML5和CSS3输入

Question

我正在尝试创建一个输入下拉列表，如下所示：[！[在此输入图像描述] [1]] [1]当它下降时，它应如下所示： 现在我的下拉看起来像这样：

在我的下拉菜单中，下拉按钮不会以蓝色突出显示。 我不知道如何在输入中获得下拉按钮。

我的HTML：

<input #input type="text" class="form-control input-list tn-input-list" [(ngModel)]="query" (keyup)="filter($event)">
    <button class="button-list tn-button-list" (click)="showAll(input)">
      <span class="tn icon-icon_Dropdown_Arrow  icon-padding"></span>
    </button>

    <ul id="list-group" class="list-group group-list tn-group-list" *ngIf="filteredList.length > 0">
        <li *ngFor="let item of filteredList" [class.active]="item.selected" [id]="item.selected" class="list-group-item item-list tn-item-list" (click)="select(item)">
          {{ item.name }}
        </li>
    </ul>

我的CSS：

    .tn-input-list {
  width:95%;
  float: left;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.tn-button-list {
  float:left;
  height: 34px;
  width: 5%;
}

.tn-button-list i {
  margin-top: -5px;
}

.tn-group-list {
  max-height: 411px;
  overflow: auto;
  float: left;
  width: 95%;
  border-bottom: 1px solid #ddd;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.tn-item-list {
  cursor: pointer;
}

.tn-item-list:hover {
  background: #f5f5f5;
}

.tn-item-list:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

请注意：我只能使用自举和自定义样式。 （我需要下拉按钮以及输入框突出显示。）

Answer 1

要在您输入框中带回按钮，您可以添加此css部分：

.tn-button-list {
  transform: translateX(-100%);
  background-color: transparent;
  border: none;
}