Angular Material：带有清除按钮的跨浏览器搜索输入

Question

我正在寻找一个类似于 HTML5 的带有清除按钮的跨浏览器搜索控件

<input type="search">

由 Chrome 渲染：

我使用this code 获得的最相关结果，我使用了“无外观”的标准样本，因为我不需要应用下划线和其他一些样式：

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

工作stackblitz here