angular - Ändra markören och ta bort underliggande linje

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

Jag har ett mat-form-field identifierat med klassen filter. Jag försöker göra typsnittets markör "vit" och få den blå linjen som visas när elementet är i fokus att försvinna. Ändringarna ska endast gälla för inputfältet i elementen med klassen "filter".

Jag har hittat några referenser (exempel) men saker i materialet förändras ofta, så jag är lite vilse.

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

Markören (caret) är inte vit men .mat-form-field-underline/.mat-form-field-ripple är fortfarande där.

Svar #1

Varsågod - StackBlitz

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

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

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

Svar #2

Du kan ändra markörfärgen med stilen caret-color. När det gäller den blå linjen under inmatningen behöver du gömma .mat-form-field-ripple som visas när mat-form-field har fokus.

.filter input {
  caret-color: white;
}

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

Relaterade artiklar