Как изменить цвет заполнителя md-input-container с помощью css в угловом материале

Ответ 1

Заполнитель обозначается как <label> в угловом материале. Поэтому вам действительно нужно стилизовать ярлык, а не заполнить его.

Как только вы нажмете (фокус) на ввод, этот <label> который выглядит как заполнитель, сместится и преобразуется в форму <label>.

Поэтому вам просто нужно применить этот CSS:

/* When the input is not focused */
md-input-container label {
  color: red;
}

/* When the input is focused */
md-input-container.md-input-focused label {
  color: blue;
}

Взгляните на эту демонстрацию Plunkr.

Ответ 2

в последней версии углового вы можете удалить местозаполнитель во вводе и добавить мат-заполнитель в поле формы мата и настроить css с классом

html:

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

CSS:

.mat-focused .placeholder {
    color: #00D318;
}

Ответ 3

Как сказал @Wenacary в этом посте: Как изменить Угловой 5 Заполнитель материала?

В последней версии углового вы можете удалить местозаполнитель во вводе и добавить матовщик в поле mat-form-field и настроить css с классом

html:

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

CSS:

.mat-focused .placeholder {
    color: #00D318;
}

Ответ 4

В Угловом 4+

Сначала вам нужно будет отключить ViewEncapsulation для стилей Material Elements. Будьте предупреждены, что это подрывает DOM по умолчанию с угловой эмулированной теневой тенью, и вы должны действовать с осторожностью (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).

В dummy.component.ts:

@Component({
 ...,
 encapsulation: ViewEncapsulation.None,
})

Затем присвойте элементу <mat-form-field> уникальный класс в dummy.component.html:

<mat-form-field class="dummy-input-field" floatPlaceholder="always">
  <input placeholder="Dummy"/>
</mat-form-field>

Наконец, в dummy.component.css примените стиль:

.dummy-input-field .mat-input-placeholder {
  color: red;
}

Аналогично, если вы хотите динамически изменять цвет, если поле сосредоточено:

.dummy-input-field.mat-focused .mat-input-placeholder {
  color: red;
}

Ответ 5

Для более новых версий материалов, которые имеют префикс mat вместо префикса md, вы можете сделать это двумя способами:

путь 1: использование инкапсуляции просмотра не установлено, а затем запись стилей в файле css компонентов, например, @user2245995, указанном в ответе выше. Несмотря на то, что это способ угловатости, пожалуйста, имейте в виду, что стили, которые вы пишете здесь, будут распространяться на все дочерние/родительские компоненты и влиять на другие элементы.

путь 2: Мы можем использовать компиляторы потомков с пронизывающим теневым тоном, т.е. /deep/ or :: ng-deep или >>> Ниже приведен пример

/deep/ label.mat-input-placeholder {
  color: #fff;   // choose the color you want
}

Хотя этот метод определен в угловых документах на данный момент, они упомянули, что этот метод скоро будет устаревшим. подробнее: https://angular.io/guide/component-styles#!#-deep-

Ответ 6

Одно из решений, предоставленных самим материалом 2, содержится в примере кода. Я сделал образец здесь:

<mat-form-field>
 <mat-label>Input</mat-label>
 <input matInput >
</mat-form-field>

Демо-версия Plunker

Ответ 7

.container {
  .mat-form-field-outline,
  .mat-form-field-empty.mat-form-field-label,
  .mat-form-field-label,
  .mat-form-field-underline,
  .mat-input-element,
  ::placeholder {
    color: $white !important;
  }
}

Код выше дает мне результаты ниже. Я переопределяю form-field контур, пустую метку, метку, подчеркивание, элемент ввода, текст заполнителя.

Я использую Angular 8.2.2 и Angular Material 8.2.2