可清除输入覆盖标签填充

Question

尝试使用关闭图标按钮进行输入，<input type=search>但我需要更多样式，所以我决定自己制作，但问题是输入和标签的位置在需要时也会稍微移动清除输入。

form.component.html

<div class="flex-center ">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">
  </button>
  <label class="desc">description</label>
</div>

form.component.css

.flex-center {
 display: flex;
 align-items: center;
 justify-content: center;
 }

.desc {
 padding-left: 16px;
 }

.button-close {
 margin-left: -5%;
 }

这是我迄今为止尝试过的方法，clereable input demo。需要建议如何解决这个问题，

Answer 1

问题是当输入为空时按钮不存在，当输入一些文本时，按钮被插入到 DOM 中占用一些 space，这使得标签移动。将按钮放在不同层上的一种方法是在元素上使用 position: absolute。

尝试这样的事情：

clearable-input.component.html

<div class="input-wrapper">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">X</button>
</div>
<label>Description</label>

clearable-input.component.ts

.input-wrapper {
  position: relative;
  display: inline-block;
}

button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
}

label {
  margin-left: 15px;
}

工作demo

可清除输入覆盖标签填充

clearable input overwrite label padding

css

angular

angular-ng-if

bulma