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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.