更改光标并删除底层行

Question

<div class="clientxxx-table-field">
    <div    id="client-table" 
            *ngIf="displayedColumnsOfClient != null && dataSourceOfClient != null" 
            class="table-container mat-elevation-z8 verticalScrollableParent" 
            [style.max-height.px]="'400'">
        <div class="FilterAndFilterUsed  client-header">
            <div class="table-name">Client</div>
            <mat-form-field class="filter">
                <input  class="filter-input" 
                        matInput (keyup)="leftTableFilter($event.target.value)">
                <mat-placeholder class="placeholder">Filter</mat-placeholder>
            </mat-form-field>
            <mat-slide-toggle   class="FilterUsed" 
                                (change)="leftFilterUsed($event)">
                Used
            </mat-slide-toggle>
        </div>
    </div>
</div>

我有一个mat-form-field由班级确定的filter。我试图使字体光标“白色”，并且当元素处于焦点时出现的蓝线消失。更改应仅适用于具有“过滤器”类的元素中的输入字段。

我找到了一些参考资料（例如），但材料中的东西经常变化，所以我有点迷茫。

---

  .filter 
    input 
      caret-color: white;
    .mat-focused .mat-form-field-underline 
      display: none;

光标（插入符号）不是白色的，但.mat-form-field-underline/.mat-form-field-ripple仍然存在。

Answer 1

给你 - StackBlitz

::ng-deep .filter  {
  background: green;
}

::ng-deep .filter.mat-focused .mat-form-field-underline {
  display: none;
}

::ng-deep .filter input {
  caret-color: white;
}