增加宽度并将占位符添加到垫输入（角度〜5）

Question

我正在使用垫输入（代码如下）：它看起来/看起来像这样（下面的屏幕截图） - 添加一个占位符，一旦用户开始输入，该占位符就会消失。目前在我的实现中，文本向上移动并浮动（一旦焦点位于输入框）并且文本不断出现在 UI 上。有人可以帮助我实现我想要的吗？

Answer 1

使用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" />

Answer 2

<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 3

只需删除 mat-label 并在 mat 输入中添加占位符属性即可。

<mat-form-field appearance="outline">

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

</mat-form-field>

工作 stackblitz：https://stackblitz.com/edit/angular-fjhtdf

Answer 4

此链接可能对您有帮助

如何在打字时将占位符移动到焦点顶部？