Я использую 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>
Используя инструменты разработчика Chrome (F12), вы можете проверить отдельные элементы, нажав Ctrl + Shift + C и после этого щелкнув элемент. Таким образом, я узнал, что класс "кросс-кнопок" close ui-select-match-close
.
Chrome выводит вычисленные стили:
Там вы можете видеть, что у span есть свой атрибут color, установленный на # 000000, и его атрибут opacity - 0.2. С помощью этой информации вы можете стилизовать кнопки со следующим CSS:
.close.ui-select-match-close {
color:#f00;
opacity: 1;
}
У других браузеров тоже есть отличные инструменты для разработчиков.