代码之家 › 专栏 › 技术社区 › Patola

在Angular 15上更改垫子形状字段的边界

material-design angular-material angular

-1

Patola · 技术社区 · 3 年前

下面的图片显示了我正在追求的设计和目前输出的角度15。

<div class="form-field-container">
   <h3>Email</h3>
   <mat-form-field appearance="outline">
      <input matInput type="email" id="Email" name="Email" formControlName="email" />
   </mat-form-field>
</div>

这就是我迄今为止尝试的风格。但这些都不起作用。即边界仍然是圆形的并且颜色必须改变。如何使边框看起来像设计?

.input {
  background-color: #E5ECF5 !important;
  color: #001050 !important;
  letter-spacing: 0.05em;
}

.mdc-text-field {
  font-size: 12px;
  font-weight: 500;
  color: #001080 !important;
  background-color: #E5ECF6 !important;
  border-radius: 0px !important;
  letter-spacing: 0.05em;
}

.mat-mdc-form-field-appearance-outline {
  border-color: #001050 !important;
  border-radius: 0px !important;
}

.mat-form-field-outline-start,
.mat-form-field-outline-end {
  border-radius: 0 !important;
  border-color: #001080 !important;
}

.mat-mdc-form-field-error-wrapper {
  padding: 0px !important;
  margin: 0px !important;
  font-size: 9px;
  font-family: 'Roboto';
  font-weight: 600;
  text-transform: uppercase;
}

这些都是DOM中的CSS类。

mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align ng-tns-c24-4
mat-mdc-form-field-error mat-mdc-form-field-bottom-align ng-tns-c24-4 ng-star-inserted
mat-mdc-form-field-error-wrapper ng-tns-c24-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted



mat-mdc-form-field ng-tns-c24-4 mat-mdc-form-field-type-mat-input mat-form-field-appearance-outline mat-primary ng-pristine ng-invalid ng-star-inserted mat-form-field-invalid ng-touched

此外,当我使用自动补全时,会有一种奇怪的背景颜色,但如果我打字,它就不存在了。无法调整文本框的高度,并且文本未居中。理想情况下,高度应该小10倍,文本应该垂直居中。

1 回复 | 直到 3 年前

Adrian Kokot 3 年前

文本字段中的边框由创建 mdc-notched-outline__leading , mdc-notech-outline__notch 和 mdc-noteched-outline__trailing 类。

例如,您可以通过以下方式更改形状和颜色:

.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
  border-radius: 0px !important;
  border-color: blue !important;
}

那些元素在里面 <mat-form-field> (绝对位置),这就是改变的原因 <垫子形式字段> 上课不起作用。