如何更改 angularjs 的 ui-select 模块中十字按钮的颜色

Question

我正在使用 ui-select 用于多个 selection in drop down.When 一个项目是 selected 它在selected 项目的右上角。我可以将十字按钮的颜色更改为红色吗？

<ui-select multiple ng-model="multipleUserDemo.selectedUserWithGroupBy" theme="bootstrap" ng-change="refreshUsers($select.search) : '')" style="width:100%;">
  <ui-select-match placeholder="--Select--">
       <span ng-bind = "$item.userName"></span>
  </ui-select-match>
  <ui-select-choices repeat="user in Users track by $index" refresh="refreshUsers($select.search)" refresh-delay="0">
       <div ng-bind-html="user.userName | highlight: $select.search"></div>
           <small>
             Email Id: <span ng-bind-html="user.email | highlight: $select.search"></span>
           </small>
  </ui-select-choices>
</ui-select>

Answer 1

通过使用 Chrome 的开发人员工具 (F12)，您可以通过按 Ctrl+Shift+C 然后单击元素来检查单个元素。这样我发现 "cross buttons" 的 class 是 close ui-select-match-close.

Chrome 输出计算样式：

您可以看到，span 的 color 属性设置为 #000000 及其 opacity -属性设置为 0.2。使用此信息，您可以使用以下 CSS:

设置按钮样式

.close.ui-select-match-close {
    color:#f00;
    opacity: 1;
}

其他浏览器也有很棒的开发者工具。

如何更改 angularjs 的 ui-select 模块中十字按钮的颜色

how to change the color of cross button in ui-select module of angularjs

javascript

angularjs

ui-select