IE et Chrome: Contour personnalisé css problème

J'essaie de créer un contour personnalisé pour un bouton et je suis confronté à des problèmes avec Chrome et IE et Edge.IE et Chrome: Contour personnalisé css problème

Voir cette codepen: http://codepen.io/alansouzati/pen/dXEWLB

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

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

Dans Safari et Firefox, je reçois le comportement attendu.

Pour le tester, cliquez sur le deuxième bouton (Mise au point personnalisée). Dans IE et Edge, je reçois le contour même si je n'ai pas appuyé sur tabulation. Dans Safari et Firefox, le contour n'apparaît que si j'appuie sur l'onglet, pas quand je clique sur le bouton.

Des suggestions sur la façon de résoudre ce problème pour Chrome et IE?

Source

2016-09-29 Alan Souza

Vous pouvez utiliser .blur() dans jQuery pour éviter la mise au point après un clic sur un bouton.

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>

Source

2016-09-29 02:19:02

Je n'ai pas jQuery dans mon projet. Aussi, il me semble bizarre de retirer le focus du bouton –

Si vous n'utilisez pas jQuery, vous pouvez essayer ceci: Mise au point personnalisée Je pense que cela est dû à la mise en évidence de la mise au point intégrée dans Chrome et IE, vous devez donc la mettre en évidence manuellement. –

Merci, le problème avec le flou est d'utiliser l'onglet en fait. Si je tape sur le bouton, et j'appuie sur la touche Entrée 5 fois, je m'attendrais à ce que le bouton soit cliqué 5 fois. avec cette stratégie de flou, il est seulement cliqué une fois. –

Votre CSS peut être simplifiée pour

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

Et puis Edge rendre le contour comme Chrome, ce qui me fait penser que le problème a à voir avec le traitement des CSS selector specificity dans Edge.

Updated Codepen: http://codepen.io/anon/pen/EgvYPR

Notez cependant que dans votre exemple lorsque je clique sur le deuxième bouton avec la souris puis déplacer le curseur en dehors du bouton avant de le relâcher, le contour apparaît même si la touche de tabulation n'a pas été pressé: même comportement dans tous les navigateurs. Si ce n'est pas prévu, je vous suggère de passer à une solution JavaScript.

Source

2016-09-29 05:45:35

Ce comportement n'est pas ce que j'attends. En fait, j'ai décidé de suivre les instructions fournies dans ce post: https://marcysutton.com/button-focus-hell/. Ce qui va à votre suggestion d'utiliser Javascript pour résoudre le problème de mise au point. –

IE et Chrome: Contour personnalisé css problème

Répondre

Questions connexes