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