как изменить цвет крестика в модуле ui-select angularjs

0

Я использую 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>
  • 0
    Не могли бы вы предоставить скрипку?
  • 0
    вот ссылка на plunker plnkr.co/edit/m1SQXUxftBLQtitng1f0?p=preview
Показать ещё 1 комментарий
Теги:
ui-select

1 ответ

1
Лучший ответ

Используя инструменты разработчика Chrome (F12), вы можете проверить отдельные элементы, нажав Ctrl + Shift + C и после этого щелкнув элемент. Таким образом, я узнал, что класс "кросс-кнопок" close ui-select-match-close.

Chrome выводит вычисленные стили:

Изображение 174551

Там вы можете видеть, что у span есть свой атрибут color, установленный на # 000000, и его атрибут opacity - 0.2. С помощью этой информации вы можете стилизовать кнопки со следующим CSS:

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

У других браузеров тоже есть отличные инструменты для разработчиков.

  • 0
    Спасибо, приятель !! отлично работает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню