Как изменить css звездочки, сгенерированной требуемым в угловом поле формы материала?

Question

Я использую угловой материал в приложении 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>

Это обязательное поле, и в качестве заполнителя этого поля ввода после заполнителя добавляется «*», как показано ниже:

Я хочуизмените цвет "*" в заполнителе на красный.Как я могу изменить цвет?

Html Генерируется приведенным выше полем mat-form:

Answer 1

В 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: после

Answer 2

ckIkram предложение было хорошим, но я нашел другое решение.

Angular Material рассматривает заполнитель как метку, поэтому я написал этот css, чтобы изменить цвет звездочки *.

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

Это то, что сработало для меня, но предостережение: / deep / selector не рекомендуется, так что в конечном итоге это не сработает в будущем ...

Answer 3

К сожалению, даже стиль текста заполнителя довольно экспериментален, и я попытался добавить псевдоселектор :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">

Кроме того, вы можете сделать весь текст заполнителя красным и включить в него звездочку.