更改 mat-form-field 中的边框颜色答案

【问题标题】：Changing border color in mat-form-field更改 mat-form-field 中的边框颜色
【发布时间】：2018-12-08 08:11:46
【问题描述】：

我正在使用角度材料mat-form-field。我有一个深色背景，因此我试图将表单域的边框更改为白色。但我无法使用 css 实现它。不，无论我在 css 中做什么更改，它们都不会反映到 mat-form-field 中。这是我的代码的链接：

StackBlitz link to my work

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： css angular

【解决方案1】：

我认为这将涵盖所有内容。

// mat-icon-stepper selected color change 
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
    background-color: red!important;
}

//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: red!important;
    // opacity: 1!important;
}

//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: red!important;
}

// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
    color: red!important;
    opacity: 0.8!important;
}

// mat-input carent color
::ng-deep .mat-input-element {
    caret-color: red!important;
}

// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
    caret-color: red!important;
}

// mat-label normal state style
::ng-deep .mat-form-field-label {
    color: rgba(0,0,0,.6)!important;
    // color: $mainColor!important;
}

// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red!important;
}

// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: red!important;
}

【讨论】：

绝对完整的解决方案，而不是!important我添加了容器类
很高兴将颜色 red 替换为 css 变量，因此颜色随处变化而无需更新一百个位置
写::ng-deep一次就够了，以防scss
感谢您的解决方案，我正在寻找类似的东西，它对更改边框和所有其他细节有完整的解释@sasa
注意：::ng-deep 是deprecated

【解决方案2】：

将此 CSS 添加到您的 form-field-appearance-example.css：

/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: white;
}
/* Font color */
input.mat-input-element {
  color: white;
}

不过，在专注领域的时候还是有问题的。

【讨论】：

嗨，谢谢。有用。请问您是如何找到这些类的，我无法在开发者工具中找到这些类。
很高兴听到 :) 我刚刚使用 Page Inspector 浏览了 HTML。不过Angular Material的CSS修改还是比较麻烦的。
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline:not(.mat-form-field-outline-thick) { color: #c5c5c5 ; } 帮助我区分细边框和粗边框
如何更改标签颜色
有效但不限于范围

【解决方案3】：

对于较新的概述表单字段，以这种方式解决：

::ng-deep {
     .mat-form-field-appearance-outline .mat-form-field-outline {
        color: white;
     }
     mat-form-field {
        .mat-hint, input, ::placeholder, .mat-form-field-label {
           color: white;
        }
     }
  }

【讨论】：

我看到了你的答案，但没有意识到 "::ng-deep" 明确告诉它查看声明的元素（不包括 div 元素内的标签）直到我让一位同事解释我为什么需要它。
@SeanDuggan 仅供参考，::ng-deep 已弃用，应尽可能避免使用。 angular.io/guide/component-styles#deprecated-deep--and-ng-deep
@Rich 但似乎没有其他方法可以覆盖视图封装。所以除了使用::ng-deep 之外别无他法
您应该在您不需要ng-deep 的styles.scss 中为您的angular-mat 组件设置主题，并使您的更改适用于任何使用它的组件。
@Random 仅当您打算在任何地方都使用新样式时

【解决方案4】：

SCSS 版本的 @sasa 以颜色作为变量

::ng-deep {
   $custom-main-color: red;
   $custom-label-color: rgba(0, 0, 0, .6);

   // mat-icon-stepper selected color change
   .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
      background-color: $custom-main-color !important;
   }

   // input outline color
   .mat-form-field-appearance-outline .mat-form-field-outline {
      color: $custom-main-color !important;
   }

   // mat-input focused color
   .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
      color: $custom-main-color !important;
   }

   // mat-input error outline color
   .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
      color: $custom-main-color !important;
      opacity: 0.8 !important;
   }

   // mat-input caret color
   .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-input error caret color
   .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-label normal state style
   .mat-form-field-label {
      color: $custom-label-color !important;
   }

   // mat-label focused style
   .mat-form-field.mat-focused .mat-form-field-label {
      color: $custom-main-color !important;
   }

   // mat-label error style
   .mat-form-field.mat-form-field-invalid .mat-form-field-label {
      color: $custom-main-color !important;
   }
}

【讨论】：

【解决方案5】：

我尝试了很多东西，最后，我能够改变底线（我们认为是边框，实际上不是边框），使用这个：

::ng-deep.mat-form-field.mat-focused .mat-form-field-ripple{
    background-color: black;
}

那条彩色线实际上是用颜色填充的跨度！希望这会有所帮助:)

【讨论】：

正是我想要的，tysm！

【解决方案6】：

HTML

<mat-form-field appearance="outline" style="margin: 0 20px;" class="border-red">
     <mat-label>Transaction Number</mat-label>
     <input matInput placeholder="Transaction number" [(ngModel)]="transactionNumber">
</mat-form-field>

SCSS

$color-outline: red;

mat-form-field {
   &.border-red {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
   }
}

仅当您将 .border-red 课程授予您的 mat-form-field 时，这才有效。

如果你想在所有的mat-form-field上应用（去掉border-red style rule）

$color-outline: red;

mat-form-field {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
}

【讨论】：

【解决方案7】：

使用 CSS 的解决方案非常简单。我调查了谷歌开发者工具中的元素。最好的解决方案是以下代码。我只是想在输入元素有效的情况下更改边框颜色：

以下代码用于 style.css 文件

.ng-valid div {
    color: #009e08 !important;
 }

这个解决方案也会改变文本的颜色。如果你不想改变文本的颜色，你可以通过下面的 CSS 代码来调整文本的颜色：

.ng-valid div input {
  color: black !important;
}

当然你可以选择你想要的颜色。

如果之前没有触摸过输入框，可以使用下面的方法来改变输入框的颜色

改变细边框的颜色：

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

更改悬停时出现的粗边框的颜色：

.mat-form-field-appearance-outline .mat-form-field-outline-thick{
    color: #3f51b5 !important
}

但是，如果输入字段无效，则这些 CSS 规则会覆盖显示的红色。为了防止这种情况，您可以使用以下 CSS 规则：对于细边框：

.mat-form-field-outline:not( .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick){
    color: black;
}

对于粗边框： .mat-form-field-appearance-outline .mat-form-field-outline-thick:not( .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid 。 mat-form-field-outline-thick){ 颜色：#3f51b5 ！重要 }

如果您想在组件的 CSS 文件中使用这些规则，那么您可能需要在每个规则之前添加::ng-deep。

【讨论】：

可行的解决方案，但它也改变了我不想要的文本颜色。
我更新了解决方案。您可以单独调整文本的颜色。

【解决方案8】：

移除边框并添加框阴影：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
        border-radius: 50% !important;
        border: none;
        border-left: none;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
        border-radius: 1px !important;
        border: none;
        border-right: none;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
        border-radius: 1px !important;
        border-bottom: none;
    }
    
    ::ng-deep.mat-form-field-appearance-outline .mat-form-field-outline {
        box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
        border-radius: 15px;
    }

【讨论】：

【解决方案9】：

我用这个方法得到了答案，这就是为什么我分享你可以使用的。

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
        padding: 0 !important;
    }
    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
        padding: 0 !important;
        height: 35px;
        border: none;
    }

【讨论】：

【解决方案10】：

将css添加到全局styles.scss文件中，放在那里就可以工作了。

我在 styles.scss 中使用了这个 css，它对我有用 -

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

我希望这对其他人有所帮助。

【讨论】：

这是最干净的答案。 ng-deep 已弃用，无论如何都不是一个好习惯。这应该是答案
不工作。 @hyena，你能分享一下 stackBlitz 链接吗？
@VikramSapate 什么 stackbBlitz？我在styles.scss 中使用了这个.mat-form-field-error { border: 1px solid white !important; }，它对我有用

【解决方案11】：

试试这个，如果需要，添加/删除 ::ng-deep

 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
                border-radius: 1px !important;
                border: 1px solid  red;
                border-left:none;
              }
            ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
                border-radius: 1px !important;
                border: 1px solid red;
                border-right:none;
              }
              ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
                border-radius: 1px !important;
                border-bottom: 1px solid   red;
              }

【讨论】：

【解决方案12】：

这个问题的最终解决方案是访问 MatFormField 的 _connectionContainerRef 属性。然后，使用选择器找到子元素并应用自定义样式。我强烈建议使用指令来解决这个问题。

@Directive({
  selector: '[adOutlineBorder]',
})
export class OutlineBorderDirective implements AfterViewInit {
  @Input() adOutlineBorder: MatFormField;
  @Input() outlineColor: string = 'none';
  @Input() outlineRadius: number = 10;
  @Input() outlineWidth: number = 3;

  constructor() {}
  ngAfterViewInit(): void {
    const element = this.adOutlineBorder._connectionContainerRef.nativeElement.querySelector(
      '.mat-form-field-outline'
    ) as HTMLElement;
    element.style.border = `${this.outlineWidth}px solid ${this.outlineColor}`;
    element.style.borderRadius = `${this.outlineRadius}px`;
  }
}

 <mat-form-field
    #fieldRef
    [adOutlineBorder]="fieldRef"
    [outlineWidth]="3"
    [outlineColor]="'green'"
    [outlineRadius]="10"
  > </mat-form-field>

现代 Web 应用程序有很多动态样式。通过 CSS 应用样式并不容易，因为 Angular Material 似乎没有这样的目标。我认为专注于 CSS-IN-JS 将对您的应用程序产生巨大影响，因为样式将更具可配置性，从而最大程度地增强用户体验。

【讨论】：

【解决方案13】：

mat-form-field 元素在更改其状态时会添加一些类。例如，当您单击文本输入时，它会添加mat-focused。您可以使用它以及其他选择器来更改边框：

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

【讨论】：

【解决方案14】：

这是我的解决方案。

/** form field bottom border color */
.mat-form-field-appearance-fill .mat-form-field-underline::before {
  background-color: transparent;
}

【讨论】：