首页 文章

如何更改角材料表单字段中所需生成的asterick的css？

提问于
浏览 次
0

我在angular6应用程序中使用角度材料 .

<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>

这是必填字段，在此输入字段的占位符中，"*"将在以下占位符后追加：
enter image description here

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

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

enter image description here

html css angular angular-material-6

3 回答

  • 0

    在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中的伪类做自己的东西：之后

    回复于
  • 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>

    
<input type="email" placeholder="Email" class="required">

    或者，您可以将整个占位符文本设置为红色，并在其中包含一个星号 .

    回复于
  • 0

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

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

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

    这对我有用，但需要注意的是，/ deep / selector是折旧的，所以最终这将不会有用......

    回复于

相关问题