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

Question

我有一个 angular ui-网格，在过滤器部分 bui 像这样：

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

看起来像这样：

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

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

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

Here is an ultra-simplified pen

Answer 1

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

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

我原以为基于 AngularJS 构建的组件会使用允许完全替换过滤器模板的指令 ~~但它要么不存在，要么我无法找到它~~.

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

最糟糕的是，他们使用的过滤器是使用纯 <select> 和 <option> 标签构建的，这在设计样式时确实很痛苦。一个好的起点是 this awesome answer 和接受的起点，来自同一个问题。

您可能会注意到，copy/pasting 我链接的答案中的代码有效，但实施和维护起来很痛苦。

我必须承认我会考虑 UI-Grid 的替代方案，例如 Smart table or ngTable. I'd also mention Swimlane's ngx-datatable，因为他们已经取得了令人难以置信的表现（表格在 100k 行的情况下平稳移动 - 就是这样！）。

祝你好运！

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

Modify CSS of <select> in Angular UI-grid

css

angularjs

angular-ui-grid