IE и Chrome: css custom outline issue

Question

Я пытаюсь создать пользовательский контур для кнопки, и я сталкиваюсь с проблемами с Chrome и IE и Edge.

Смотрите эту codepen: http://codepen.io/alansouzati/pen/dXEWLB

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

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

В Safari и Firefox я получаю ожидаемое поведение.

Чтобы проверить это, нажмите вторую кнопку (пользовательская фокусировка). В IE и Edge я получаю схему, хотя я не нажимал вкладку. В Safari и Firefox контур отображается только в том случае, если я нажимаю вкладку, а не когда я нажимаю кнопку.

Любые предложения по устранению этой проблемы для Chrome и IE?

Answer 1

Вы можете использовать .blur() в jQuery, чтобы избежать фокусировки после нажатия кнопки.

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; 
} 

И тогда край будет оказывать план так же, как Chrome, который заставляет меня думать, что проблема связана с обработкой CSS selector specificity в Edge.

Обновлено Codepen: http://codepen.io/anon/pen/EgvYPR

Однако обратите внимание, что в вашем примере, когда я нажимаю на вторую кнопку с помощью мыши, а затем переместите курсор за пределами кнопки, прежде чем отпустить его, появится контур, даже если ключ вкладка не было нажато: такое же поведение во всех браузерах. Если это не предназначено, я предлагаю вам перейти на решение JavaScript.