Угловой материал: межбраузерный поиск с кнопкой очистки

Question

Я искал кросс-браузерный элемент управления поиском с кнопкой очистки, похожей на HTML5

<input type="search">

от Chrome:

Наиболее важные результаты, которые я получаю с этот код где я использовал стандартный образец «без внешнего вида», так как мне не нужно подчеркивание, и применены некоторые другие стили:

<mat-form-field class="example-form-field" appearance="none">
  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

Но кнопка может плавать вверх и вниз в разных случаях:

UPD,Это не поиск библиотеки, книги или учебника: D

Answer 1

Люблю внимание к деталям здесь ... Я бы поместил этот CSS в ваш input-clearable-example.css :

input.mat-input-element{margin-top:0; padding-bottom:7px;}

или ng-deep (в случае, еслиэто не работает ... хотя и должно)

::ng-deep input.mat-input-element{margin-top:0; padding-bottom:7px;}

Работает здесь стекаблиц