在 Angular UI-grid 中修改 <select> 的 CSS答案

【问题标题】：Modify CSS of <select> in Angular UI-grid在 Angular UI-grid 中修改 <select> 的 CSS
【发布时间】：2017-01-24 04:35:56
【问题描述】：

我有一个有角度的 ui-grid，它在过滤器部分有一个像这样构建的：

, filter: {
           type: uiGridConstants.filter.SELECT,
           selectOptions: [
             { value: 'male', label: 'male' },
             { value: 'female', label: 'female' }
            ]
          }

看起来像这样：

我已经尝试了所有我能想到的方法来修改 CSS 使其看起来像这样：

但无论我做什么，我似乎都无法为下拉菜单的任何方面设置样式...有没有人成功尝试设置 ui-grid 下拉菜单的样式？

-----编辑1-----

Here is an ultra-simplified pen

【问题讨论】：

你熟悉inspect-ing DOM元素的概念吗？
是的，感谢您的讽刺评论。无论我在 DOM 中改变什么，对选项都没有相应的影响
这不是备注。这是一个问题。我问是因为，以目前的形式，你的问题表明你不熟悉它。我无法检查问题的图片。因此，请创建一个minimal reproducible example，或者至少提供一个可以体验和检查此问题的链接。我保证我会提供帮助并提供可行的解决方案。
如果我误解了您的评论，我深表歉意。这是一支笔codepen.io/uxisnow/pen/NdgRrE

标签： css angularjs angular-ui-grid

【解决方案1】：

UI-Grid 似乎不像人们在查看他们的首页时想象的那样可定制。

这是 UI-Grid 中的customizable elements 列表，目前，过滤器不是其中之一。

我本来希望在 AngularJS 上构建的组件使用允许完全替换过滤器模板的指令~~，但它要么还不存在，要么我找不到它~~。

编辑：经过进一步挖掘，我发现headerCellTemplate 深埋在他们的文档中。不完全确定如何使用它，但我认为它拥有打开宝箱的钥匙。

最糟糕的是，他们使用的过滤器是使用普通的<select> 和<option> 标签构建的，这对风格来说真的很痛苦。一个好的起点是this awesome answer 和接受的起点，来自同一个问题。

您可能会注意到，从我链接的答案中复制/粘贴代码是可行的，但实施和维护起来很痛苦。

我必须承认，在您的位置上，我会考虑 UI-Grid 的替代品，例如 Smart table 或 ngTable。我还要提到 Swimlane 的 ngx-datatable，因为他们已经取得了令人难以置信的表现（表格在 100k 行中平稳移动 - 就是这样！）。

祝你好运！

【讨论】：