Comment supprimer la bordure bleue ennuyeuse des boutons dans Chrome ?

Supprimez la bordure bleue des boutons personnalisés dans Chrome

Lors de la personnalisation de l'apparence de balises utilisant CSS, il est courant de supprimer la bordure par défaut pour un look plus propre. Cependant, dans Chrome, une bordure bleue ennuyeuse peut apparaître autour du bouton lorsque vous cliquez dessus.

Le problème :

Les styles de navigateur par défaut peuvent remplacer certaines propriétés CSS, y compris celles liés aux états focus et actifs. Dans Chrome, les boutons ont un contour de focus bleu lorsque vous cliquez dessus, même lorsque la bordure : aucune n'est définie.

Solution :

Remarque : Supprimer le focus les contours ne sont pas recommandés car ils peuvent affecter l'accessibilité.

Si vous souhaitez toujours masquer la bordure bleue, ajoutez le CSS suivant règle :

button:focus {
  outline: 0;
}

Cette règle supprime explicitement le contour du focus, remplaçant le comportement par défaut du navigateur.

Explication :

Le pseudo- :focus La classe est déclenchée lorsqu'un élément reçoit le focus (généralement en cliquant ou en tabulant). En définissant outline : 0 ;, vous éliminez la bordure bleue associée à cet état ciblé.

Solutions alternatives :

• Utilisez des balises de bouton spécialement conçues pour l'accessibilité, tel que .
• Désactivez le contour de tous les boutons en utilisant *{outline: 0} ; (non recommandé).
• Utilisez JavaScript pour supprimer le contour du focus sur des boutons spécifiques.

Considérations supplémentaires :

• Assurez-vous que votre CSS est correctement chargé et appliqué à la page.
• Videz le cache de votre navigateur pour actualiser le cache styles.
• Testez votre solution dans plusieurs navigateurs pour garantir la compatibilité entre navigateurs.

Référence :

• [MDN Web Documents - :focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!