如何修正clr-select-container下拉箭头的位置偏移问题？

我使用clr-select-container组件构建下拉选择器，截图显示该组件的下拉箭头与容器右侧存在几像素间距，无法和页面中其他同类型组件一样对齐到容器末端。所有clr-select-container的开发写法完全一致，但唯独这个组件出现箭头位置异常，找不到原因。

代码:

<div *ngIf="true" id="idAppRatesSelectionDiv">
    <clr-select-container id="idAppRatesSelectionContainer">
        <label id="idAppRatesLablel"> {{"LABELS.App_Rate" | translate }}:</label>
        <select id="idAppRatesSelectionMenu" clrSelect name="appRatesTypes" [(ngModel)]="iAppRatesSelectionPasser.appRateSelected" (change)="onAppRateSelected($event)">
            <option *ngFor="let appRateOfProduct of appRatesOfProduct" [ngValue]="appRateOfProduct">{{appRateOfProduct}}</option>
        </select>
    </clr-select-container>
</div>

截图:

排查与解决建议 #

• 检查自定义CSS干扰：打开浏览器开发者工具，定位到idAppRatesSelectionContainer元素，查看是否有额外的padding/margin/width属性被继承或覆盖，尤其是父容器idAppRatesSelectionDiv是否设置了异常的box-sizing或宽度限制。
• 修正DOM结构空白：Clarity组件对DOM空白可能敏感，尝试将<label>和<select>的代码紧凑排列，去掉不必要的换行或空格，避免布局计算偏差。
• 验证指令与绑定：确认clrSelect指令正确应用，[(ngModel)]绑定的变量无异常值，同时检查*ngIf是否导致组件渲染时机延迟，引发样式计算错误。
• 强制样式调整（临时方案）：如果以上排查无效，可添加自定义CSS强制修正箭头位置：

  #idAppRatesSelectionContainer .clr-select-wrapper::after {
    right: 8px; /* 根据实际偏移情况调整数值 */
  }
  

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