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

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>

here is the link of plunker http://plnkr.co/edit/m1SQXUxftBLQtitng1f0?p=preview — Sunil Garg, Nov 26 '15 at 07:18
So you're talking about the button's on the chips / results? — Ben Kauer, Nov 26 '15 at 07:27

Ben Kauer · Accepted Answer · 2015-11-26T07:41:17.710

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.

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

1 Answers1