Is there a way to remove border from an angular mat-form-field when its disabled?

Question

I am trying to remove borders from a mat-form-field when the field is disabled but I've tried all the options I could find online but nothing seems to removing the borders from the div

Here is my code:

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

Here is what I have tried so far:

First approach:

.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 Approach:

.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 approach:

::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 really appreciate some help with this and please let me know if you want me post any other information.

Answer 1

For CSS:

::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled, ::ng-deep .mat-form-field-outline {
opacity: 0;
}

HTML

<mat-form-field appearance="fill" class="full-width">
  <mat-label>Employee ID</mat-label>
  <input matInput type="text" value="value" [disabled]="true" class="emp_id">
</mat-form-field>