web-dev-qa-db-ja.com

角度マテリアルng-クリック奇妙な境界線ハイライト

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

角度-アニメーション-1.4.1

角度UIブースト-0.9.0

ブートストラップ-3.2.0

JQuery-2.1.4

何か案は？たとえば、このplnkrを参照してください。 http://plnkr.co/edit/60u8Ur?p=preview

cssangularjsangularjs-ng-clickangular-material
30
Rus Paul

あなたの問題は：フォーカスです、あなたはこのようなことをすることで回避できます

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

そのため、これはあなたのスパンのためだけです。他のアイテムを他の場所で削除したい場合は、他のアイテムをより具体的に取得できます。

66
ajmajmajma

ほとんどの要素で同じ問題に直面しました。

私の場合、次のCSSコードが機能しました：

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

これは簡単かもしれません：

nofocusクラスをその要素に追加し、

:focusのクラスにcssを追加します

.nofocus:focus {
    outline: none;
}
8
bhv