Angular中为mat-select滚动条设置圆角及面板适配问题求助

一、实现下拉面板滚动条四角圆角（仅保留圆角，不修改轨道/滑块样式） #

直接保留滚动条容器的圆角设置，删掉轨道和滑块的自定义样式即可。同时要注意Angular的视图封装机制，确保样式能作用到下拉面板：

代码示例： #

// 若在组件样式文件中编写，需添加 ::ng-deep 穿透样式隔离
::ng-deep .custom-panel-siteId::-webkit-scrollbar {
  border-radius: 5px; // 为滚动条整体设置四角圆角
}

// 可选：隐藏默认滚动条上下按钮，避免按钮遮挡轨道圆角
::ng-deep .custom-panel-siteId::-webkit-scrollbar-button {
  display: none;
}

如果不想使用::ng-deep，把这段样式放到全局样式文件（如styles.scss）中即可，无需穿透就能生效。

之前右下角圆角未生效的原因： #

你之前仅设置了向下滚动按钮的圆角，但默认按钮会遮挡轨道的右下角圆角，隐藏按钮后，轨道的圆角会正常显示，实现四角统一的效果。

二、使用panelClass避免下拉面板与输入框重叠 #

在Angular Material 14中，通过给mat-select绑定panelClass，再调整面板的上边距就能解决重叠问题：

第一步：为mat-select绑定panelClass #

<mat-select [panelClass]="'custom-panel-siteId'">
  <!-- 下拉选项内容 -->
</mat-select>

第二步：添加样式 #

// 可放入全局样式文件，或在组件内添加::ng-deep穿透
::ng-deep .custom-panel-siteId {
  margin-top: 8px !important; // 调整上边距，拉开与输入框的距离
}

注意：下拉面板默认挂载在body下，组件内样式无法直接作用到它，因此要么用::ng-deep穿透，要么直接写在全局样式里。

三、精简滚动条样式（仅保留圆角） #

直接删除轨道和滑块的阴影样式，只保留滚动条容器的圆角设置，最终代码如下：

::ng-deep .custom-panel-siteId::-webkit-scrollbar {
  border-radius: 5px;
}

// 可选：隐藏滚动条按钮优化圆角显示
::ng-deep .custom-panel-siteId::-webkit-scrollbar-button {
  display: none;
}

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