Question

我正在尝试更改角度材质中文本框的边框颜色。现在有3种不同的颜色（悬停，焦点，空闲）。我怎样才能改变这些颜色？我希望它们与我的主题不同。

<mat-form-field id="test" appearance="outline">
  <mat-label class="test2">Outline form field</mat-label>
  <input matInput placeholder="name">
</mat-form-field>

可以选择更改字体大小，但我似乎无法弄清楚颜色：

mat-form-field.mat-form-field {
    font-size: 16px;
    color: red;
}

此处的颜色属性不会改变任何内容。

感谢您抽出宝贵时间。

Answer 1

为时已晚，但我仍然相信这对搜索它的人有效：

如果您注意到在mat-form-field中有两种关于边框的行为。

当您将鼠标悬停在其上并单击它时，它具有一种边框颜色（当然，如果您在此之前更改了外观）

例如，如果您使用的是：

<mat-form-field class="example-chip-list" [color]="primary" appearance="outline"> </mat-form-field>

当您将鼠标悬停在它上面时，您会看到一种颜色，但是当您单击它时，它将采用的边框颜色将来自：

[color] =“主要”

如果要更改它，请遵循样式上提供的棱角材料。如果要更改悬停时的颜色（不建议使用:: ng-deep），则需要在组件中添加ViewEncapsulation：

@Component({
...
  encapsulation: ViewEncapsulation.None
})

并将以下内容添加到样式类中：

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

当您将鼠标悬停在元素上时，它将更改元素的颜色。

P.S，如果您还有一个后缀或前缀元素可以覆盖这些颜色，只需添加以下内容：

  mat-form-field.mat-form-field {
    color:white;
  }

P.S，如果要在不悬停或触摸元素时更改边框的颜色，这将有所帮助：

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

更新2/5/2019：

要更改主要/辅助颜色，您可以使用http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5生成自己的颜色并将其应用到主题中。

Answer 2

有一种方法可以更改Angular Material样式的颜色，而无需使用已弃用的::ng-deep。增加选择器的特异性，并将样式放在主/根样式表中。

因此，如果您的组件中包含以下内容：

<form>
  <mat-form-field class="my-form-field">
    <input matInput placeholder="My Input">
  </mat-form-field>
</form>

您可以在主样式表中添加以下样式：

/** Overrides underline color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-ripple,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-ripple {
    background-color: white;
}

/** Overrides label color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-label,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-label {
    color: white;
}

/** Overrides caret & text color **/
.my-form-field.mat-form-field-appearance-legacy .mat-input-element {
    caret-color: white;
  color: white;
}

StackBlitz Demo

这不是设计整个应用程序样式的推荐方式，因为您应该只create your own theme。但这对于一次性组件是有意义的，例如，背景颜色与可用的主题颜色发生冲突。

Answer 3

根据angular material documentation，您只能将颜色设置为主要/强调颜色并发出警告（即红色）。

<mat-form-field>有一个颜色属性，可以设置为primary，accent或warn。这将根据应用的主题颜色设置表单字段的下划线和浮动标签的颜色。

注意：您可以使用::ng-deep使用CSS hacks，但最终会被弃用。或者您可以使用组件声明中的encapsulation: ViewEncapsulation.None来避免使用::ng-deep，但read up on that，因为它会导致其他样式问题。

::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
  background-color: blue !important;
}

Answer 4

转到Node_modules-> @angular->材质->预建主题-> indigo-pink.css-> 找到垫子形式的外观轮廓，然后更改颜色

Answer 5

通过此CSS，您可以在悬停时更改颜色/边框厚度

 .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
 border: 0.2px solid #666;
 opacity: 1;

 .mat-form-field-outline-start,
 .mat-form-field-outline-gap,
 .mat-form-field-outline-end {
     border: none;
 }
}

Answer 6

使用：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'xxxx-dialog',
  templateUrl: './xxxx-dialog.component.html',
  styleUrls: ['./xxxx-dialog.component.css'],
  encapsulation: ViewEncapsulation.None
})

通过检查影响元素的浏览器属性进行检查。选择该课程，然后在本地CSS内容中进行编辑。

.mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: .4375em 0;
    width: 650px;
}

Answer 7

对我有用的唯一方法是：

// mat-input focused color
.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
  border: none !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 1;

  .mat-form-field-outline-start {
    border-top: 2px solid #1976d2 !important;
    border-left: 2px solid #1976d2 !important;
    border-bottom: 2px solid #1976d2 !important;
  }
  .mat-form-field-outline-gap {
    border-bottom: 2px solid #1976d2 !important;
  }
  .mat-form-field-outline-end {
    border-top: 2px solid #1976d2 !important;
    border-right: 2px solid #1976d2 !important;
    border-bottom: 2px solid #1976d2 !important;
  }
}
.mat-form-field-flex:hover .mat-form-field-outline-gap {
  border-top: 2px solid #1976d2 !important;
}
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
  border-top-color: transparent !important;
}

如何更改角度材质中的mat-form-field边框颜色

7 个答案: