更改光标并删除基础线

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”的元素中的输入字段。

我找到了一些参考文献（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

您可以使用caret-color样式更改插入符号颜色。至于输入下的蓝线，你需要隐藏当.mat-form-field-ripple有焦点时出现的mat-form-field。

.filter input {
  caret-color: white;
}

.filter.mat-focused .mat-form-field-ripple {
  display: none;
}