在垫子形式字段中更改边框颜色

时间：2018-06-29 07:32:25

标签： css angular

我正在使用角形材料mat-form-field。我的背景很暗，因此尝试将表单字段的边框更改为白色。但是我无法使用CSS实现它。不，无论我在CSS中进行了什么更改，它们都不会反映回mat-form-field中。这是我的代码的链接：

StackBlitz link to my work

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

11 个答案:

答案 0 :(得分：7)

将此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;
}

尽管如此，但在聚焦领域时仍然存在问题。

答案 1 :(得分：3)

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

// 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;
}

答案 2 :(得分：3)

@sasa的

SCSS版本，颜色为变量

::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;
   }
}

答案 3 :(得分：2)

对于较新的概述表单字段，请按以下方式解决：

::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;
        }
     }
  }

答案 4 :(得分：2)

我尝试了很多事情，最后，我能够使用以下方法更改底线（我们认为这是边界，实际上不是边界）：

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

那条彩色线实际上是充满色彩的跨度！希望这会有所帮助：）

答案 5 :(得分：0)

尝试此操作，如果需要，添加/删除:: 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;
              }

答案 6 :(得分：0)

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上应用（删除边框红色样式规则）

$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 :(得分：0)

删除boder并添加box-shadow：

::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;
    }

答案 8 :(得分：0)

我用过这个方法并得到了答案，这就是我分享你可以使用的原因。

::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;
    }

答案 9 :(得分：0)

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

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

bsoncxx::types::b_date(...)

我希望这会帮助其他人。

答案 10 :(得分：0)

这个问题的最终解决方案是访问 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 将对您的应用程序产生巨大影响，因为样式将更具可配置性，从而最大程度地增强用户体验。

相关问题
最新问题