如何修改ngx-paginator中mat-form-field下select的下拉箭头为白色

开发者阿泽

2026-9-29

问题原因

你使用的是添加了matNativeControl指令的原生<select>元素，而非Angular Material封装的<mat-select>组件，因此你编写的.mat-select-arrow选择器无法匹配到目标元素，自然不会生效。原生select的下拉箭头由浏览器默认渲染，需要通过专门的CSS属性修改样式。

解决方案

修改你现有的::ng-deep样式块，新增原生select的箭头样式配置即可：

::ng-deep {
  /* 原有已有样式保留 */
  .mat-form-field-appearance-outline .mat-form-field-outline {
    color: #ffffff;
  }

  mat-form-field {
    .mat-hint, input, ::placeholder, .mat-form-field-label {
      color: #ffffff;
    }
    /* 新增原生select样式 */
    select[matNativeControl] {
      /* 清除浏览器默认下拉箭头 */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      /* 插入自定义白色箭头 */
      background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 2px center;
      /* 右侧预留箭头位置避免和文字重叠 */
      padding-right: 28px;
      color: #fff;
    }
  }
}