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

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