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

<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 все еще там.