Angular-material ng-click странная подсветка границы

У меня проблема с использованием AngularJS и Angular-Material.

Взгляните на следующий код:

<div flex="100">
   <ul class="list-group">
       <li class="list-group-item cursorPointer" 
        ng-repeat="item in array" ng-click="selectItem(item)">
          {{item.name}}
       </li>
    </ul>
</div>

Тег li имеет прикрепленную к нему функцию ng-click, которая содержит некоторую бизнес-логику. Проблема в том, что при нажатии на нее появляется странная граница (похожая на выделение пользователем), и я не могу понять, откуда она.

Кажется, это появляется только тогда, когда у меня есть директива ng-click для элемента (такое же поведение для элемента span)

Используемые версии:

AngularJS - 1.4.1

Угловой материал - 0.9.4

Угловая-Ария - 1.4.0

Angular-Animate - 1.4.1

Угловой UI-Boostrap - 0.9.0

Загрузочный - 3.2.0

JQuery - 2.1.4

Любые идеи? См., Например, этот plnkr: http://plnkr.co/edit/60u8Ur?p=preview


css angularjs angular-material angularjs-ng-click
person Rus Paul    schedule 22.06.2015    source источник
comment
Bootstrap имеет его для элемента групп элементов ссылок, мне интересно, не применяет ли angular-bootstrap CSS к элементу, который является интерактивным и элементом списка-группы. Просто догадка.   -  person GillesC    schedule 22.06.2015
comment
@gillesc Дело в том, что если я удалю все скрипты angular-material, то выделение исчезнет. Так что он должен быть из материала angular, но я не могу понять, откуда именно.   -  person Rus Paul    schedule 22.06.2015

Ответы (3)


arrow_upward
84
arrow_downward

Ваша проблема в том, что фокус, вы можете обойтись, сделав что-то вроде этого

 span:focus {
    outline: none;
    border: 0;
 }

Так что это только для вашего диапазона, вы можете уточнить другие элементы, если хотите удалить его где-нибудь еще.

person ajmajmajma    schedule 22.06.2015
comment
Это не в центре внимания. Проверьте plnkr, который я указал в вопросе, и попробуйте. - person Rus Paul; 22.06.2015
comment
@RusPaul это фокус, вам просто нужно удалить его из любых элементов, которые вы хотите, у меня просто пример файла a. Если вы используете хром, откройте инструменты разработчика, перейдите к тегу elements и проверьте свои li (или в зависимости от того, что у вас есть ng-click), щелкните правой кнопкой мыши и установите состояние элемента на: focus. - person ajmajmajma; 22.06.2015
comment
@RusPaul, какая часть, по вашему мнению, не работает? - person ajmajmajma; 22.06.2015
comment
Эта странная синяя граница все еще не исчезает. См. Снимок экрана: i.imgur.com/6hR3hbA.png - person Rus Paul; 22.06.2015
comment
@RusPaul обновил CSS, используйте схему: нет; и граница: 0; См. Здесь - plnkr.co/edit/V9n42JiMWmWrvvpHqdrO?p=preview. Настройте таргетинг на все, что хотите, вы, вероятно, могли бы сделать *: focus, если хотите, но не рекомендуется использовать *. - person ajmajmajma; 22.06.2015
comment
Я думаю, это должно быть span {outline: none; граница: 0; } - person Rohit Luthra; 29.04.2017

arrow_upward
21
arrow_downward

Я столкнулся с той же проблемой с большинством элементов.

В моем случае работали следующие коды CSS:

*:focus {
    outline: none !important;
    border: 0 !important;
}
person Amit    schedule 13.02.2018

arrow_upward
10
arrow_downward

это может быть легко:

добавьте класс nofocus к этим элементам,

и добавьте css к этому классу на :focus

.nofocus:focus {
    outline: none;
}
person bhv    schedule 29.03.2017