Материал Угловое Текстовое поле с тенью

Question

Я проектирую форму, и я хотел бы, чтобы поле ввода, как показано ниже в угловом материале matInput.Как добиться этого?

Вот скриншот того, как я хочу

Answer 1

Если вам нужен больший контроль, добавьте это в таблицу стилей

.mat-form-field-flex{
  background-color: lightgray;
}

, вы можете найти класс css для каждой части компонента в консоли разработчика.

Answer 2

Под тенью я предполагаю, что вы имеете в виду заполненный вид текстового поля материала.Вы получите этот вид, добавив appearance="fill" к вашему mat-form-field.

<mat-form-field appearance="fill">
    <mat-label>Fill form field</mat-label>
    <input matInput placeholder="Placeholder">
</mat-form-field>

Варианты внешнего вида поля формы