CODEWITHSUNDEEP
angulartypescriptangular-material
NoIdeaHowToFixThis
NoIdeaHowToFixThis

Reputation: 4564

Change the cursor and remove underlying line

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

I have a mat-form-field identified by the class filter. I am trying to make the font cursor "white" and the blue line that appears when the element is on focus disappear. The changes should apply only for to the input field in the elements with class "filter".

I have found some references (example) but things in material change often so I am a little lost.

enter image description here

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

The cursor (caret) is not white but the .mat-form-field-underline / .mat-form-field-ripple is still there.

Upvotes: 3

Views: 6777

Answers (2)

camden_kid
camden_kid

Reputation: 12813

Here you go - StackBlitz

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

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

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

Upvotes: 6

Joseph Webber
Joseph Webber

Reputation: 2173

You can change the caret color with the caret-color style. As for the blue line under the input, you'll need to hide .mat-form-field-ripple which appears when the mat-form-field has focus.

.filter input {
  caret-color: white;
}

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

Upvotes: 2

Related Questions