时间戳

首页 > 解决方案 > 在 angular 10 中如何减小 mat 表单域外观轮廓边框大小

css - 在 angular 10 中如何减小 mat 表单域外观轮廓边框大小

问题描述

在 angular 10 中，使用@angular/material，如何减少mat-form-field悬停状态下轮廓边框的外观。

我可以使用以下代码修改默认边框大小：

:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

在悬停时，会显示这样的浓黑色

在此处输入图像描述

我需要在悬停时这样显示

在此处输入图像描述

标签： cssangularangular-material

解决方案

如果您在浏览器中检查输入元素，您会注意到悬停状态会影响 3 个内部元素.mat-form-field-outline。因此，要强制所有这些元素在悬停状态下获得宽度为 1px 的黑色边框，您可以这样做：

.mat-form-field ::ng-deep .mat-form-field-outline-start,
.mat-form-field ::ng-deep .mat-form-field-outline-gap,
.mat-form-field ::ng-deep .mat-form-field-outline-end {
  color: black;
  border-width: 1px !important;
}

⚡ 这是一个工作示例：https ://stackblitz.com/edit/angular-stackoverflow-66985351

推荐阅读