Как изменить цвет заполнителя md-input-container с помощью CSS в Angular Material? Как скриншот ниже, у меня нет телефона. и текстовое поле пароля. Телефонный номер. текстовое поле имеет номер телефона и пароль имеет имя заполнителя пароля.
Как изменить цвет заполнителя 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>
Ответ 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
контур, пустую метку, метку, подчеркивание, элемент ввода, текст заполнителя.