web-dev-qa-db-ja.com

uib-accordion-headingをクリックしたときに表示される青い境界線を削除するにはどうすればよいですか？

次の質問に示されている解決策を試しましたが、役に立ちませんでした。

Chromeのcssカスタムスタイルボタンから青い境界線を削除します

クリックした場合にボタンの青いボックスの影の境界線を削除する方法

テキスト/入力ボックスの周囲の境界線（アウトライン）を削除する方法は？（Chrome）

入力テキスト要素の境界線のハイライトを削除する方法

ボタンの青い「選択された」アウトラインを削除

とにかく、Chromeすばやくクリックすると、Chrome $ ===の要素が青色で強調表示されないようにしますか？

ブートストラップボタンをクリックすると青いアウトラインが表示されます

フォーム入力フィールドをクリックしたときに青い外側の境界線を取り除く方法は？

HTMLには次のものがあります。

<uib-accordion-heading>
    <div id="fart1" ng-if="!contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-plus-sign pull-right"></span></div>
    <div id="fart2" ng-if="contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-minus-sign pull-right"></span></div>
</uib-accordion-heading>

青い輪郭はアコーディオンヘッダー全体の周りには表示されませんが、フォームはテキストの周りに収まります。インラインスタイリング、IDとクラスによる選択を試しましたが、!importantを使用しても変更されません。

CSSで私は持っています：

#fart1:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fart2:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect {
    border: none !important;
    outline: none !important;
    outline-width: 0 !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

outline: noneをoutline: 0に交換しようとしましたが、何も変わりませんでした。

私のCSSファイルへのリンク： https://jsfiddle.net/8wnd2nz5/

編集-私が言及していることを説明するために画像を添付しました。

Blue Outline

csstwitter-bootstrapangular-ui-bootstrap
8
Legion

解決策

:focus {outline:0 !important;}

このコードはすべてフォーカスボーダーを削除します。

16
cnsvnc

not working outline: 0/noneに問題があるすべての人-設定してみてください：

:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}
2
Сергій Хащевий

要素のアウトラインをnoneに設定してこれを行うことができると思います。

.element {
  outline: none;
 }
0
Julsy

Chromeは、アクセシビリティの理由から青い線を追加しています。これをCSSに追加することで削除できます。ただし、これは、ユーザーがフォーカスされた要素を見つけるのに役立つ可能性のあるすべてのフォーカスアウトラインを非表示にする一種の「ブルートフォース」であることに注意してください。

*:focus {
    outline: none !important;
}
0
Christian Moser