увеличить ширину и добавить заполнитель к входу мата (angular ~ 5)

Question

Я использую матричный ввод (код ниже): который выглядит / выглядит примерно так (ниже скриншота) - добавьте плашечку, которая исчезает, когда пользователь начинает печатать. В настоящее время в моей реализации текст смещается вверх и всплывает (как только акцент делается на поле ввода), а текст продолжает отображаться в интерфейсе пользователя.

Может ли кто-нибудь помочь мне в достижении того, чего я хочу ??

Answer 1

Эта ссылка может быть полезна для вас

Как переместить заполнитель сверху на фокус И при наборе текста?

Answer 2

Просто удалите метку мата и добавьте атрибут заполнителя в поле ввода мата.

<mat-form-field appearance="outline">
  <input type="text" matInput (keyup)="searchList($event.target.value)" placeholder="Find {{ this['groupType'] }} by Name" />
</mat-form-field>

Рабочий стек бликов: https://stackblitz.com/edit/angular-fjhtdf

Answer 3

<mat-form-field>
 <mat-label>Find {{ this['groupType'] }} by Name</mat-label>
        <input type="text" matInput (keyup)="searchList($event.target.value)" style="padding: 3px 10px; font-size: 20px;"/>
      </mat-form-field>

Answer 4

Используйте padding, вам не нужно изменять height входа. Чтобы изменить цвет заполнителя, используйте ::placeholder. Увеличение font-size также увеличит высоту ввода.

input {
  padding: 8px;
  font-size: 18px;
  border: 1px solid #efefef;
  border-radius: 3px;
}

input::placeholder {
  color: lightgray;
}

<input placeholder="Example Input" />