Angular Material选择列表下拉箭头位置异常：未居右而居中

这不是Angular Material的内部限制，而是样式继承或布局冲突导致的下拉箭头定位异常，完全可以通过针对性的样式覆盖解决。

可能原因 #

Angular Material的mat-select下拉箭头默认采用绝对定位，相对于其父容器（.mat-select-trigger）定位。当组件宽度超过280px时箭头错位，通常是因为：

• mat-form-field或其内部的.mat-form-field-infix、.mat-select-trigger未正确设置为100%宽度，导致箭头的参考容器宽度未随组件整体扩展；
• 父级组件（如.preview-section或更高层级）存在隐性的宽度限制或溢出规则，干扰了箭头的定位逻辑。

解决步骤 #

1. 确保表单组件及其内部元素占满宽度 #

为full-width-input类补充样式，强制内部元素拉伸至容器宽度：

.full-width-input {
  width: 100%;

  // 让表单内部容器占满宽度，移除默认最小宽度限制
  .mat-form-field-infix {
    width: 100%;
    min-width: unset;
  }

  // 确保选择器触发容器占满宽度，并为箭头定位提供参考
  .mat-select-trigger {
    width: 100%;
    position: relative;
  }
}

2. 强制下拉箭头固定到右侧 #

覆盖箭头容器的样式，确保它始终对齐到组件右侧：

.full-width-input .mat-select-arrow-wrapper {
  position: absolute;
  right: 16px; // 可根据需求调整与右侧的间距
  top: 50%;
  transform: translateY(-50%); // 保持垂直居中
}

3. 排查父级容器的干扰 #

检查.preview-section或更高层级的父组件是否存在overflow: hidden、max-width等规则，若有则需调整或移除这些限制，确保mat-form-field能正常扩展宽度。

验证效果 #

应用上述样式后，当组件宽度设置为400px时，下拉箭头会自动对齐到组件右侧，不再固定在中间位置。

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