更改光标并删除下一行

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标识的。 我正在尝试使字体光标变为“白色”，而当元素处于焦点位置时出现的蓝线消失。 更改应仅适用于“过滤器”类的元素中的输入字段。

我找到了一些参考文献（example），但是材料上的东西经常变化，所以我有点迷茫。

---

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

Answer 2

您可以使用SELECT name, number,GROUP_CONCAT(class SEPARATOR ' ') FROM table1 GROUP BY name 样式更改插入符号的颜色。至于输入下方的蓝线，您需要隐藏caret-color具有焦点时出现的.mat-form-field-ripple。

mat-form-field