我在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>
这是必填字段,在此输入字段的占位符中,“*”在占位符之后附加如下:
我想将占位符中的“*”颜色更改为红色。我怎样才能改变颜色?
由上面的mat-form-field生成的Html:
在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中的伪类做自己的东西:之后
不幸的是,即使是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">
或者,您可以将整个占位符文本设置为红色,并在其中包含一个星号。
ckIkram的建议很好,但我想出了另一个解决方案。
Angular Material将占位符视为标签,所以我写了这个css来改变asterick *的颜色。
/deep/ label span.mat-form-field-required-marker{
color:red;
}
这对我有用,但需要注意的是,/ deep / selector是折旧的,所以最终这将不会有用......