PrimeVue输入框hover触发下方输入框移位问题求助

我已通过自定义CSS实现PrimeVue输入框的hover效果（因设计令牌无法满足需求），但遇到问题：当第一个输入框hover时，边框宽度变化会导致下方输入框移位，而textarea组件无此问题。相关代码如下：

模板代码 #

<label for="ref_num" class="labels">Untertitel</label>
<InputGroup>
  <IconField>
    <InputText id="eventSubtitle" v-model="eventSubtitle" placeholder="Untertitel" maxlength="255" />
    <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Untertitel ist erforderlich'"></InputIcon-->
  </IconField>
</InputGroup>

<label for="ref_num" class="labels">Standort (GPS)</label>
<InputGroup>
  <InputGroupAddon>
    <i class="pi pi-globe"></i>
  </InputGroupAddon>
  <IconField>
    <InputMask id="eventLocation" v-model="eventLocation" placeholder="Standort (GPS)" mask="99.9999, 999.9999"
      style="border-radius: 0rem 0.4rem 0.4rem 0rem;" maxlength="255" />
    <!--InputIcon class="pi pi-exclamation-circle" v-tooltip="'Standort erforderlich'"></InputIcon-->
  </IconField>
</InputGroup>

自定义样式 #

.p-inputtext {width: 100%; padding: 1rem !important; box-sizing: border-box;}
.p-inputtext:hover {border-width: 0.15rem; box-sizing: border-box;}

问题原因 #

hover时修改border-width会改变输入框的总尺寸——即使设置了box-sizing: border-box，当边框宽度从默认值（通常为1px）变为0.15rem（约2.4px）时，输入框的高度会增加，从而挤压下方元素导致移位。textarea无此问题是因为PrimeVue对textarea的默认样式或布局处理不同，抵消了边框宽度变化的影响。

解决方案 #

方案1：用透明边框占位，hover仅改颜色

初始状态就设置与hover时相同的边框宽度，用默认边框色占位，hover时只修改边框颜色，保证元素尺寸不变：

.p-inputtext {
  width: 100%;
  padding: 1rem !important;
  box-sizing: border-box;
  border-width: 0.15rem; /* 与hover时一致 */
  border-color: #d9d9d9; /* 替换为PrimeVue默认边框色 */
}
.p-inputtext:hover {
  border-color: #165DFF; /* 替换为你需要的hover边框色 */
}

方案2：用outline替代border实现hover效果

outline不占据元素布局空间，修改outline不会改变输入框尺寸，自然不会导致下方元素移位：

.p-inputtext {
  width: 100%;
  padding: 1rem !important;
  box-sizing: border-box;
  outline: none; /* 移除默认outline避免冲突 */
}
.p-inputtext:hover {
  outline: 0.15rem solid #165DFF; /* 替换为你需要的hover边框色 */
}

内容的提问来源于stack exchange，提问作者Han Solo