Angular-material ng-点击奇怪的边框高亮

Question

我在使用 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

Angular-Material - 0.9.4

Angular-咏叹调 - 1.4.0

Angular-动画 - 1.4.1

Angular-UI-Boostrap - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

有什么想法吗？例如，请参阅此 plnkr：http://plnkr.co/edit/60u8Ur?p=preview

Answer 1

你的问题是 :focus，你可以通过这样做来绕过

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

所以这只是针对您的跨度，如果您想在其他地方删除它，您可以更具体地了解其他项目。

Answer 2

这可能很简单：

将 nofocus class 添加到该元素，

并在 :focus

上将 css 添加到 class

.nofocus:focus {
    outline: none;
}

Answer 3

我遇到了大多数元素的相同问题。

在我的案例中，以下 CSS 代码有效：

*:focus {
    outline: none !important;
    border: 0 !important;
}

Angular-material ng-点击奇怪的边框高亮

Angular-material ng-click strange border highlight

css

angularjs

angularjs-ng-click

angular-material