增加宽度并将占位符添加到垫输入（角度〜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>&nbsp;<mat-label>Find {{ this['groupType'] }} by Name</mat-label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" matInput (keyup)="searchList($event.target.value)" style="padding: 3px 10px; font-size: 20px;"/>&nbsp; &nbsp; &nbsp; </mat-form-field>

Answer 3

只需删除 mat-label 并在 mat 输入中添加占位符属性即可。<mat-form-field appearance="outline">&nbsp; <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

此链接可能对您有帮助如何在打字时将占位符移动到焦点顶部？