I've been attempting to eliminate borders from a mat-form-field when the field is disabled, but despite trying various solutions found online, I haven't been successful in removing the borders from the div.
Below is the code snippet:
<div *ngIf="readOnly" class="medium-2 columns read-only-true">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Employee ID</mat-label>
<input [disabled]="readOnly" class="emp_id" required [(ngModel)]="form.id" matInput name="empID" placeholder="EMP #">
</mat-form-field>
</div>
This is what I have attempted so far:
First method:
.read-only-true .mat-form-field-outline-start {
border-color: white;
}
.read-only-true .mat-form-field-outline-gap {
border-color: white;
}
.read-only-true .mat-form-field-outline-end {
border-color: white;
}
Second method:
.read-only-true .mat-form-field-outline .mat-form-field-outline-start {
border: white !important;
}
.read-only-true .mat-form-field-outline .mat-form-field-outline-end {
border: white !important;
}
Third method:
::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-start {
border: 1px solid white !important;
}
::ng-deep .read-only-true .mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-end {
border: 1px solid white; !important
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
I would greatly appreciate any assistance with this matter. Please let me know if you require any additional information from my end.