IEとChrome：CSSカスタムアウトラインの問題

Question

ボタンのカスタムアウトラインを作成しようとしていますが、ChromeとIEとEdgeの問題に直面しています。私が期待される動作を取得SafariやFirefoxではhttp://codepen.io/alansouzati/pen/dXEWLB

.custom:focus { 
    outline: black solid 2px; 
} 

.custom:active, 
.custom:hover, 
.custom:visited { 
    outline: 0; 
} 

：

このcodepenを参照してください。

テストするには、2番目のボタン（カスタムフォーカス）をクリックします。 IEとEdgeでは、タブを押さなくてもアウトラインを取得しています。 SafariとFirefoxでは、ボタンをクリックしたときではなく、タブを押すだけでアウトラインが表示されます。

ChromeとIEのこの問題を解決する方法についてのご意見はありますか？

Answer 1

jbleryで.blur（）を使用すると、ボタンをクリックした後でフォーカスを避けることができます。

function myFunction() { 
 
    alert('hi'); 
 
} 
 

 
$(".custom").click(function(e) { 
 
    $(this).blur(); 
 
    myFunction(); 
 
});

.custom:focus { 
 
    outline: black solid 2px; 
 
} 
 

 
.custom:active, 
 
.custom:hover, 
 
.custom:visited { 
 
    outline: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="myFunction()">Default focus</button> 
 
<br/> 
 
<br/> 
 
<button type="button" class="custom">Custom focus</button>

Answer 2

あなたのCSSは

.custom:focus:not(:active) { 
    outline: black solid 2px; 
} 

に単純化することができる。そしてエッジは、ちょうど私が問題の取り扱いに関係していると思わせるクロム、などのアウトラインをレンダリングしますEdgeのCSS selector specificity。私はマウスで第二ボタンをクリックし、それを解放する前に、ボタンの外にカーソルを移動すると、あなたの例では、アウトラインがさえTabキー場合は表示されていることがhttp://codepen.io/anon/pen/EgvYPR

注：Codepenを更新しました

押されていない：すべてのブラウザで同じ動作。 これは意図していない場合は、JavaScriptソリューションに切り替えることをお勧めします。