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

ご注意：私は、ブートストラップ、カスタムスタイルを使用することができます。 （Iは入力ボックスと一緒に強調し取得するドロップダウンボタンを必要とする。）

Answer 1

あなたの入力ボックスのボタンを戻すためにあなたはこのCSSを追加することができます一部：

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