javascript - Angular Material : Cross-browser search input with clear button

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>

但按钮在不同情况下可能会上下 float :

更新。这不是对图书馆、书籍或教程的搜索 :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