CSS Angular-material ng-click 奇怪的边框突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30981429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular-material ng-click strange border highlight
提问by Rus Paul
I have a problem with using AngularJS and Angular-Material.
我在使用 AngularJS 和 Angular-Material 时遇到问题。
Take a look at the following code:
看看下面的代码：
<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>
The li tag has a ng-click function attach to it that contains some business logic. The problem is that there appears a strange border when you click on it (similar to user-selection highlight) and I can't seem to figure out where is it coming from.
li 标签附加了一个 ng-click 函数，其中包含一些业务逻辑。问题是当你点击它时会出现一个奇怪的边框（类似于用户选择突出显示），我似乎无法弄清楚它来自哪里。
This seems to appear only when I have an ng-click directive on an element (same behavior on span element)
这似乎只有当我在元素上有一个 ng-click 指令时才会出现（span 元素上的行为相同）
Versions used:
使用的版本：
AngularJS - 1.4.1
AngularJS - 1.4.1
Angular-Material - 0.9.4
角度材料 - 0.9.4
Angular-Aria - 1.4.0
角咏叹调 - 1.4.0
Angular-Animate - 1.4.1
角度动画 - 1.4.1
Angular-UI-Boostrap - 0.9.0
Angular-UI-Boostrap - 0.9.0
Bootstrap - 3.2.0
引导程序 - 3.2.0
JQuery - 2.1.4
jQuery - 2.1.4
Any ideas? See this plnkr for example: http://plnkr.co/edit/60u8Ur?p=preview
有任何想法吗？例如，请参阅此 plnkr：http://plnkr.co/edit/60u8Ur?p=preview
回答by ajmajmajma
Your problem is the :focus, you can get around by doing something like this
你的问题是：focus，你可以通过做这样的事情来解决
span:focus {
outline: none;
border: 0;
}
So this is just for your span, you could get more specific on other items if you wanted to remove it elsewhere.
所以这仅适用于您的跨度，如果您想在其他地方将其删除，您可以在其他项目上获得更具体的信息。
回答by Amit
I faced the same issue with most of the elements.
我对大多数元素都遇到了同样的问题。
In my case following CSS codes worked:
在我的情况下，以下 CSS 代码有效：
*:focus {
outline: none !important;
border: 0 !important;
}
回答by bhv
this may be easy :
add nofocusclass to that elements,
这可能很容易：向该元素
添加nofocus类，
and add css to that class on :focus
并将 css 添加到该类 :focus
.nofocus:focus {
outline: none;
}
