DropDown Input Using HTML5 and CSS3

Question

I am trying to create an input drop down that should look like this: [![enter image description here][1]][1] When it drops down it should look like this: Right now my drop down looks like this:

In my drop down ,drop down button is not highlighted in blue. I am not sure how I can get the dropdown button inside the input.

My 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>

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

Please note: I can only use bootstrap and custom styles. (I need the dropdown button to get highlighted along with the input box.)

Answer 1

To bring back the button in you input box you can add this css part:

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