有没有办法在禁用时从角垫形式字段中删除边框？答案

【问题标题】：Is there a way to remove border from an angular mat-form-field when its disabled?有没有办法在禁用时从角垫形式字段中删除边框？
【发布时间】：2021-06-28 04:15:35
【问题描述】：

当字段被禁用时，我试图从 mat-form-field 中删除边框，但我已经尝试了所有可以在网上找到的选项，但似乎没有任何东西可以从 div 中删除边框

这是我的代码：

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

这是我迄今为止尝试过的：

第一种方法：

.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;
}

第二种方法：

.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;
}

第三种方法：

::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;
}

非常感谢您对此的帮助，如果您希望我发布任何其他信息，请告诉我。

【问题讨论】：

试试border-style: none。

标签： css angular mat-form-field

【解决方案1】：

对于 CSS：

::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled .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>

【讨论】：

实际上我什至没有改变外观来填充它，它起作用了:) 非常感谢

【解决方案2】：

在 mat-form-field div 上，将 appearance="outline" 替换为 appearance="fill"

【讨论】：