如何让p-dropdown的占位符在选中选项后上移？

PrimeNG原生的placeholder属性选中后会被替换为选中文本，要实现占位符上移的浮动标签效果，需要通过自定义模板+CSS来实现：

1. 自定义下拉框模板 #

把占位符做成独立的浮动标签，与选中内容分离：

<!-- 父容器用于定位占位符 -->
<div class="dropdown-wrapper">
  <p-dropdown 
    [options]="sortOptions" 
    [(ngModel)]="selectedSort" 
    [showClear]="true"
    class="custom-dropdown"
  >
    <!-- 自定义选中内容模板 -->
    <ng-template pTemplate="value" let-option>
      <span class="selected-content">{{option ? option.label : ''}}</span>
    </ng-template>
    <!-- 下拉选项模板 -->
    <ng-template let-option pTemplate="item">
      {{option.label}}
    </ng-template>
  </p-dropdown>
  <!-- 独立的浮动占位符 -->
  <span class="floating-placeholder">Sort by</span>
</div>

2. 编写CSS控制样式 #

利用PrimeNG自带的状态类（p-dropdown-empty表示未选中状态），控制占位符的位置和样式变化：

.dropdown-wrapper {
  position: relative;
  width: fit-content;
}

.floating-placeholder {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  color: #888;
  transition: all 0.2s ease;
  pointer-events: none; /* 不干扰下拉框的点击交互 */
}

/* 未选中时的占位符样式 */
.custom-dropdown.p-dropdown-empty ~ .floating-placeholder {
  font-size: 1rem;
  transform: translateY(0);
}

/* 选中后的占位符样式 */
.custom-dropdown:not(.p-dropdown-empty) ~ .floating-placeholder {
  font-size: 0.75rem;
  transform: translateY(-12px);
  color: #444;
}

/* 调整下拉框内边距，避免内容与占位符重叠 */
.custom-dropdown .p-dropdown-label {
  padding-top: 0.5rem;
}

3. 细节调整 #

• 可根据UI需求修改字体大小、位移距离、过渡动画时长等参数；
• 如果需要点击占位符也能触发下拉框展开，可移除pointer-events: none，并给占位符添加点击事件触发下拉框的toggle()方法。

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