Supprimer le contour bleu sur les liens en cliquant, mais garder le contour pour la sélection TAB (accessibilité)

Question

J'ai un bouton de menu Burger qui est sélectionnable via TAB. Quand je clique dessus et que le menu s'ouvre, le hamburger a ce contour bleu pour bien faire ressortir qu'il est focalisé. Je ne veux pas supprimer ce contour bleu, car il aide les personnes malvoyantes et pour la sélection des onglets c'est aussi génial, mais est-il un moyen intelligent d'enlever le contour bleu seulement quand quelqu'un clique dessus avec la souris. Juste asthetics ...

Merci pour votre réponse.

acclamations

Answer 1

Eh bien, vous pouvez le faire de cette façon:

div:active, div:focus{ 
    outline: none; 
    border: none; 
} 

et peut-être:

*{ 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
} 

Answer 2

Si je comprends bien la question, essayez:

.myButton:active {outline: none;}

Answer 3

js:

$('#element').click(function(){ 
    $(this).addClass('mouse'); 
}); 
$('#element').blur(function(){ 
    if($(this).hasClass('mouse'){ 
    $(this).removeClass('mouse'); 
    } 
}); 

css:

.mouse{ 
    outline: none; 
} 

Answer 4

Comme vous l'avez dit, le contour bleu est ici pour des raisons d'accessibilité.

Si vous cliquez sur l'élément, le focus du clavier se déplacera également vers cet élément.

Les utilisateurs doivent donc savoir que le focus du clavier a été déplacé sur cet élément.

Certaines personnes handicapées peuvent vouloir passer à un onglet particulier en utilisant la souris, mais ensuite utiliser leur clavier pour des raisons de facilité.

Answer 5

Voici une solution simple, en Javascript simple, qui fonctionne revenir à IE 10.

Cette réponse est similaire à la réponse de @ Kuba. Ajouter/supprimer une classe en utilisant JS pour détecter un clic de souris ou un appui sur un bouton d'onglet.

javascript:

var htmlElement = document.querySelector('html'); 

document.addEventListener('click', function(){ 
    htmlElement.classList.add('clicking'); 
}); 

document.addEventListener('keyup', function(e){ 
    if (e.keyCode === 9) { 
    htmlElement.classList.remove('clicking'); 
    } 
}); 

Ensuite, désactiver les grandes lignes sur: mise au point lorsque la classe clic existe

CSS:

html.clicking .targetElement:focus { 
    outline: none; 
} 

/* 
    or you can try dealing with all visibly focusable elements from the start. I'm not sure if this is all of them, but it's good starting point. 
*/ 

html.clicking a:focus, 
html.clicking button:focus, 
html.clicking input:focus, 
html.clicking textarea:focus { 
    outline: none; 
} 

Browser Compatibilité:

querySelector IE 8+
element.classList IE 10+

jQuery alternative si vous avez besoin de prendre en charge les navigateurs plus anciens que IE10.

$(document).on('click', function(){ 
    $('html').addClass('clicking'); 
}); 

$(document).on('keyup', function(){ 
    if (e.keyCode === 9) { 
    $('html').removeClass('clicking'); 
    } 
});