以角度将 CSS 应用于 <select> 和 <option> 标记

【问题标题】：Apply CSS to <select> and <option> tag in angular以角度将 CSS 应用于 <select> 和 <option> 标记
【发布时间】：2021-03-31 14:30:54
【问题描述】：

我希望下拉列表看起来像这样。

我可以应用悬停效果，但我不知道如何向下移动下拉列表/容器以及如何使容器的边缘变圆并给出特定的边框

我想要一个纯 CSS 的解决方案，这可能吗？

【问题讨论】：

【解决方案1】：

由于我试图在 Angular 项目中将CSS 应用于<select> 和<option> 标记，因此我使用了mat(Material) 库来实现它。

我发现我们可以使用::ng-deep 选择器覆盖mat 标签，或者我们可以在相应组件的.ts 文件中写入 encapsulation: ViewEncapsulation.None

有关::ng-deep 的更多详细信息，请参阅此帖子-> How and where to use ::ng-deep?

有关encapsulation: ViewEncapsulation.None 的更多详细信息，请参阅此帖子-> When and why should we use View Encapsulation in angular

【讨论】：