如何更改 angular material 表单字段中 required 生成的星号 css？

Question

我在 angular6 应用程序中使用 angular material。

        <mat-form-field fxFlex>
            <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
            <input matInput formControlName="email" required [autofocus]="true">
            <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
            <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
        </mat-form-field>

这是必填字段，在此输入字段的占位符中，“*”附加在占位符之后，如下所示：

我想将占位符中“*”的颜色更改为红色。我怎样才能改变颜色？

Html由上面的mat-form-field生成：

Answer 1

不幸的是，即使是 styling of the placeholder text 也是实验性的，我尝试添加 :after 伪选择器来获得红星，但没有成功。

以下是我能得到的最接近您想要的内容。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}

:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}
  
label:after {
  content: " *";
  color: #ff0000;
  }

<label>Email</label>
<br/>
<input type="email" placeholder="Email" class="required">

或者，您可以将整个占位符文本设为红色，并在其中添加一个星号。

Answer 2

matFormField 上有一个输入，您可以使用 hideRequiredMarker 正如您在此处看到的 https://material.angular.io/components/form-field/api

   <mat-form-field fxFlex hideRequiredMarker="true">
        <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
        <input matInput formControlName="email" required [autofocus]="true">
        <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
        <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
    </mat-form-field>

那么也许你可以尝试在 CSS 中用伪类做你自己的事情:after

Answer 3

ckIkram的建议很好，但我想出了另一个解决方案。

Angular Material 将占位符视为标签，所以我写了这个 css 来改变星号 * 的颜色。

/deep/ label span.mat-form-field-required-marker{
   color:red;
}

这对我有用，但请注意，/deep/ 选择器已贬值，因此最终这在未来将无法使用...

Answer 4

试试这个，在 html 部分

 <mat-form-field class="mat-form-field-fluid" appearance="outline">
    <mat-label class="asterisk_input" >First Name</mat-label>
    <input matInput formControlName="email" />
</mat-form-field>

并在组件.css文件中添加以下代码

.asterisk_input::after 
{
    content:" *"; 
    color: red;
}

Answer 5

这个对我来说超级简单的东西是 styles.scss 中项目的根，只是把

.mat-form-field-required-marker { color: red }

Answer 6

在您的 css 文件中添加以下代码：

::ng-deep .mat-form-field-required-marker { color: red }

如何更改 angular material 表单字段中 required 生成的星号 css？

How to change css of asterick generated by required in angular material form field?

html

css

angular

angular-material-6