我在Angular中使用primeNg的浮动标签文本输入，但最初在开始时，浮动标签与浏览器自动建议重叠

Question

一开始当我启动应用程序时，浮动标签与自动建议重叠。请帮我解决这个问题。

我希望删除自动建议，我尝试通过编写 autosuggestion="off" 但它不起作用，或者一旦将自动建议放置在输入框中，我就会向上移动浮动标签。

<div class="from-container">
  <div class="form signin">
    <div class="title-class">
      <h1 class="prime-font title-initial">O</h1>
      <h1 class="prime-font">uting</h1>
    </div>
    <form #signinForm="ngForm" (ngSubmit)="signinUser()">
      <div class="form-fields">
      
      ** <span class="p-float-label">
        <input autocomplete="off" pInputText id="username" [(ngModel)]="signingInUser.username!" />
        <label htmlFor="username">Username</label>
      </span>**
              
        <label class="prime-font" for="password">Password</label>
        <input #password="ngModel" [(ngModel)]="signingInUser.password!" id="password" name="password"
               pInputText placeholder="Password" required="true" type="password"/>
       
      </div>

      <p-button [disabled]="signinForm.form.invalid" label="Sign In" pRipple styleClass="p-button-sm"
                type="submit" class="margin-right"></p-button>
      <div class="login-form-context-links">
        <div class="context-field">
          <span class="spacing-xss">Don't have an account?</span>
          <p-button label="Sign Up" styleClass="p-button-sm p-button-text" (click)="gotToSignup()"></p-button>
        </div>
        <div class="context-field">
          <p-button label="Forgot Password" styleClass="p-button-sm p-button-text"     (click)="gotToForgotPassword()"></p-button>
          </div>
        </div>
      </form>
     </div>
    </div>

Answer 1

针对简单输入的解决方案，但对于组件（如密码）没有帮助。

.p-float-label input:-webkit-autofill + label {
  top: -0.75rem;
  font-size: 12px;
}