Floating Label background to be removed while INPUT element is on focus

Question

(https://i.stack.imgur.com/wvT4S.png)](https://i.stack.imgur.com/wvT4S.png)

I am unable to make the floating label's background same as the body bg while focusing on the text field of the form. The label overlaps with the border of the text field. Can anyone help me fix this issue?

I am expecting something like this..

Answer 1

<div class="p-fluid mb-2">
                  <span class="p-float-label"
                    [ngClass]="personalForm.get('basicInformation.middleName')?.hasError('required') && personalForm.get('basicInformation.middleName')?.invalid?'border-red':''">
                    <input type="text" pInputText formControlName="middleName" (change)="OnChange($event)"
                      (keypress)="keyPressAlphanumeric($event);keyPressFirstSpaceRestrict($event)" placeholder="&nbsp;">
                    <label>
                      {{'common.Middlename' | translate}}
                    </label>
                  </span>
                </div>

.p-float-label input:focus~label,
.p-float-label input.p-filled~label,
.p-float-label textarea:focus~label,
.p-float-label textarea.p-filled~label,
.p-float-label .p-inputwrapper-focus~label,
.p-float-label .p-inputwrapper-filled~label {
  top: -3px;
  padding: 3px 3px 3px 3px;
  font-size: 11px;
  background-color: rgba(255, 255, 255, 1);
  color: #999;
}