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

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

введите описание изображения здесь


angular html css angular-material-6
person Johar Zaman    schedule 10.09.2018    source источник

Ответы (6)


arrow_upward
6
arrow_downward

Эта супер-простая вещь для меня лежала в основе проекта, в styles.scss просто поместите

.mat-form-field-required-marker { color: red }
person Robbie Smith    schedule 14.01.2020
comment
это сработало довольно легко. - person Demian S; 21.12.2020

arrow_upward
5
arrow_downward

Просто попробуйте это, в 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;
}
person Ajinz    schedule 27.08.2019
comment
Вход должен быть обязательным. Добавление required добавит вторую неокрашенную звездочку - person brt; 23.03.2021

arrow_upward
1
arrow_downward

В 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

person Ckram    schedule 10.09.2018

arrow_upward
1
arrow_downward

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

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

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

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

person Johar Zaman    schedule 10.09.2018

arrow_upward
1
arrow_downward

Добавьте следующий код в свой файл css:

::ng-deep .mat-form-field-required-marker { color: red }
person warseb    schedule 25.04.2020

arrow_upward
0
arrow_downward

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

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

person Yvonne Aburrow    schedule 10.09.2018