Изменить курсор и удалить нижнюю строку

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

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