当字段被禁用时,我试图从 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;
}
我非常感谢您对此提供帮助,如果您希望我发布任何其他信息,请告诉我。
最佳答案
对于 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>
关于css - 有没有办法在禁用时从 Angular 垫形式字段中删除边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66899868/