Angular 9 mat-form-field 无轮廓,无标签
Angular 9 mat-form-field no outline, no label
请告诉我如何去掉 mat-form-fields 中的“线”!
请查看附图以便更好地理解!
谢谢!
这是我的代码:
HTML CODE
<div formGroupName="settingsfield" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<input type="number" min="10" max="12000" matInput
formControlName="mysettings1">
</mat-form-field>
</div>
CSS
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
border-top-width: 0;
}
.mat-form-field-wrapper {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.mat-form-field-label-wrapper {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
::ng-deep .mat-form-field-underline{
display:none;
}
一般都是这样操作的!但它在你的牢房中间。如果这不起作用,请提供一个 stackblitz 示例。
请告诉我如何去掉 mat-form-fields 中的“线”! 请查看附图以便更好地理解!
谢谢!
这是我的代码:
HTML CODE
<div formGroupName="settingsfield" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<input type="number" min="10" max="12000" matInput
formControlName="mysettings1">
</mat-form-field>
</div>
CSS
.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
border-top-width: 0;
}
.mat-form-field-wrapper {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.mat-form-field-label-wrapper {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
::ng-deep .mat-form-field-underline{
display:none;
}
一般都是这样操作的!但它在你的牢房中间。如果这不起作用,请提供一个 stackblitz 示例。