可清除的输入覆盖标签填充

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中，并留出一些空间来移动标签。将按钮放在不同图层上的一种方法是在元素上使用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