Angular UI - ui-select 自定义样式

Posted 2023-05-09

【中文标题】Angular UI - ui-select 自定义样式

【英文标题】：Angular UI - ui-select custom styling

【发布时间】：2017-09-03 02:21:05

【问题描述】：

所以我使用 ui-select 和 angularjs 来创建一个可配置的指令。后端的功能几乎完成了，但我们的原型有非常具体的风格，我需要坚持这些风格。

我想简单地重新设置我认为合适的 ui-select 样式，但我似乎无法在网上找到一个关于如何这样做的教程。我找到了一些关于使用 $templateCache 覆盖 angular ui 使用的模板的示例。有没有办法简单地在某个地方使用它而不是默认的css文件？或者有没有办法在没有一堆 !important 标记的情况下覆盖当前类。

【参考方案1】：

当然，您可以通过我们自己的 CSS 更改 UI-select 指令的整个样式。对此没有任何限制，请查看link 中的示例 CSS 更改。

.ui-select-container 
  width:  200px;

.ui-select-bootstrap .ui-select-choices-row.active>a 
  background: #000;
  color: #fff;

.ui-select-container input 
    border: none;
    border-bottom: 1px solid #ccc;
    box-shadow: none;