在输入框中嵌入清除按钮时无法看到整个文本

Question

在 Angular 中，我在输入框中添加了清除按钮，但添加后我无法在输入框中看到整个文本，因为它被重叠了。 请在下面找到详细信息。

HTML 代码

<ng-template pTemplate="input">
    <input pInputText type="text" class="col-input-grid-100" >
    <span class="mar-left">
        <button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
            <i class="pi pi-times"></i>
        </button>
    </span>                           
</ng-template>

CSS内容

.col-input-grid-100{
      width: 135%;
      margin-left: -10px;
  }

.mar-left{
    margin-left:-29px;
  }

当前Output：输入框文本为test3@test.com。

正如您在上图中看到的那样， “com”并不清晰可见。 我尝试了多种方法，但没有用。 请帮我解决这个问题。

笔记：
1.我只想在输入框内显示十字按钮
2. 我没有使用引导程序库。

Answer 1

我尝试使用以下代码，它对我有用。

<span class="p-input-icon-right">
    <i class="pi pi-times" (click)="clearmail1(ri)" style="margin-right: -16px;"></i>
    <input id="email1" class="col-input-grid-100" type="text" pInputText >
  </span>

Output