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

Question

I am using ui-select for multiple selection in drop down.When an item is selected it shows the cross button on the right upar of selected item. Can I change the color of cross button to red ?

<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

By using Chrome's Developer Tools (F12) you can inspect single elements by pressing Ctrl+Shift+C and clicking the element afterwards. This way I found out that the class of the "cross buttons" is close ui-select-match-close .

Chrome outputs the computed styles:

There you can see, that the span has its color -attribute set to #000000 and its opacity -attribute set to 0.2 .With this information you're able to style the buttons with the following CSS:

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

Other browsers do have great Developer Tools, too.