如何移除mat-paginator中选择输入框的蓝色边框？

要去掉mat-paginator里选择框的蓝色焦点边框，可通过自定义CSS覆盖Angular Material的默认样式，以下是两种可行方案：

• 组件内样式穿透（推荐）：在使用mat-paginator的组件CSS/SCSS文件中添加以下代码，利用::ng-deep穿透组件样式封装：

::ng-deep .mat-paginator .mat-select-trigger:focus {
  outline: none !important;
  box-shadow: none !important;
}

如果蓝色边框来自组件的聚焦状态类，也可针对.mat-focused类调整：

::ng-deep .mat-paginator .mat-select.mat-focused .mat-select-trigger {
  box-shadow: none;
  outline: none;
}

• 全局样式修改：若组件内样式不生效，直接在项目根目录的styles.css（或styles.scss）中添加样式（无需::ng-deep）：

.mat-paginator .mat-select-trigger:focus {
  outline: none !important;
  box-shadow: none !important;
}

提示：可通过浏览器开发者工具（F12）选中选择框元素，查看具体是outline还是box-shadow属性导致的蓝色边框，再针对性调整。

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