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

Question

我正在使用 ui-select 在下拉列表中进行多项选择。选择一个项目时，它会在所选项目的右侧显示十字按钮。我可以将十字按钮的颜色更改为红色吗？

<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 然后单击该元素来检查单个元素。这样我发现“十字按钮”的类是close ui-select-match-close。

Chrome 输出计算出的样式:

您可以看到，跨度的颜色属性设置为#000000，其不透明度属性设置为>0.2。有了这些信息，您就可以使用以下 CSS 来设置按钮的样式:

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

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