Récemment, je travaillais sur un projet de conception Web et j'ai remarqué quelque chose d'étrange, après la dernière mise à jour de Google Chrome. Le style de bordure par défaut (style de l'agent utilisateur) pour le bouton a été modifié, ce qui me semble visuellement ennuyeux.
Existe-t-il une méthode pour modifier / restaurer les styles de navigateur par défaut, c'est-à-dire les styles d'agent utilisateur de manière permanente?
voici quelques images du problème: 
j'ai également vérifié d'autres sites Web et même google 
a également vérifié l'outil de développement, trouvé ces styles de bordure appliqués à l'état de mise au point du bouton 
5 Réponses :
Vous pouvez essayer de désactiver cet indicateur: chrome://flags/#form-controls-refresh
Apparemment, la version 83+ de chrome a changé la façon dont les formulaires sont rendus / gérés: https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html
Voici une page d'assistance Google pertinente qui renvoie au billet de blog ci-dessus: https://support.google.com/chrome/thread/48974735?hl=fr
Je pense que Google devrait annuler cette mise à jour, car cette solution est limitée à ma machine / système / uniquement. L'utilisateur final des sites Web doit également mettre à jour ce paramètre dans ses systèmes.
Ou peut-être que Google devrait simplement mettre une couleur différente plutôt que le noir et le rendre comme l'autre bleu qu'il avait auparavant? Eh bien, c'est la solution facile haha.
pour tout utilisateur final de Google Chrome (ceux qui veulent juste voir l'ancien style), la désactivation de form-controls-refresh fonctionne.
Pourriez-vous fournir le lien vers la page d'assistance Google dont vous parlez?
Salut James. Ici, vous allez support.google.com/chrome/thread/48974735?hl=fr . Bien que je ne trouve pas la solution originale maintenant.
@GaganDeep Merci. J'ai modifié votre réponse pour inclure les liens pertinents.
En effet, la nouvelle mise à jour de Chrome https://developers.google.com/web/updates/2020/05/nic83#forms
vous pouvez remplacer le contour noir dans la plupart des cas en
*,*:focus,*:hover{
outline:none;
}
et vous pouvez voir cet article
https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator
si vous souhaitez supprimer le contour uniquement pour l'utilisateur de la souris.
ce style sera utile pour les nouveaux projets, il faut penser à ceux qui sont déjà réalisés. Je pense que Google devrait désactiver cette nouvelle fonctionnalité de style par défaut, qui est actuellement activée automatiquement. ce sera bien si l'utilisateur doit activer cette nouvelle fonctionnalité manuellement par lui-même avec ce drapeau de lien: chrome: // flags / # form-controls-refresh
oui je suis d'accord avec vous, cela posera de nombreux problèmes aux utilisateurs et aux développeurs, google doit sauvegarder tous les anciens styles car vous ne pouvez pas tous les modifier par css comme une case à cocher ou sélectionner des options, il a un fond bleu laid
tous les changements ne sont pas ennuyeux, certains d’entre eux sont jolis. mais cela ne devrait pas être activé par défaut et automatiquement.
C'est mauvais pour l'accessibilité. Il existe de nombreux utilisateurs de clavier voyants et supprimer les styles de mise au point est problématique.
Ce correctif ne fonctionne pas, sauf si vous incluez leur polyfill ( github.com/WICG/focus-visible ) et même cela ne fonctionne pas sur les <option> ...
@Jason Activer les "nouveaux styles" par défaut est problématique, ne pas les désactiver avec CSS. Chaque concepteur Web qui voit cette bordure noire demanderait à un développeur Web de le réparer. Si c'était opt-in, personne ne le saurait et les utilisateurs ayant des problèmes de vue pourraient profiter de bordures noires. Maintenant, ces bordures noires deviennent simplement un "bogue" dans un suivi des problèmes, tout comme les bordures des images dans les liens dans IE. Quoi qu'il en soit, en tant que personne qui utilise la mise au point et pourrait profiter de ces frontières, je trouve de toute façon que la mise au point de contrôle dans Chrome est à peine utilisable.
Cela a résolu le problème pour moi:
chrome: // flags / # form-controls-refresh
Et désactivez ceci: capture d'écran
Oui, mais pour nous les développeurs (auxquels se rapporte la question), ce n'est pas une solution acceptable. Nous ne pouvons pas dire à chaque client de faire de telles tâches «compliquées» - nous devons nous en tenir aux paramètres par défaut et essayer de les modifier nous-mêmes sans interaction avec le client. Au moins, Google a travaillé avec Microsoft à ce sujet. Mais quand même ... assez drôle de voir ce "développement en arrière" avec un design plat, des couleurs homogènes, tout est rectangle et des contours affreux. Ressemble presque à Windows 1, DOS, logiciel système Mac, etc.
Le problème n'est pas le nouvel anneau de mise au point contrasté de Chromium, c'est le comportement par défaut dans les navigateurs qui déclenche l'anneau de mise au point.
La bague de mise au point apparaît au clic lorsque l'apparence <button> est modifiée ou reçoit l'attribut tabindex .
L'accessibilité est un must et la nouvelle bague de mise au point noire et blanche contrastante est un grand pas en avant. Cependant, il y a des développeurs (moi y compris) qui ne veulent pas que la bague de mise au point soit présente lors de l'utilisation de la souris.
/*
This will hide the focus indicator if the element receives focus via the mouse,
but it will still show up on keyboard focus.
*/
button:focus:not(:focus-visible) {
outline: none;
}
si vous utilisez un framework qui remplace les classes, utilisez les attributs visibles de focus.
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
outline: none;
}
:focus-visible pseudo sélecteur css :focus-visible , mais il n'est actuellement pris en charge dans Chrome que derrière un indicateur/*
This will hide the focus indicator if the element receives focus via the mouse,
but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
Gardez à l'esprit que pour les utilisateurs mobiles, s'il existe un élément qui déclenche l'affichage du clavier virtuel, tel que <input type="text"> , il doit avoir une indication visuelle indiquant qu'il est focalisé.
Il existe 2 façons de le gérer.
configuration en chrome que peu de gens ont suggérée .
outline: 0px transparent !important; approche par programme outline: 0px transparent !important; dans le style ou le outline: none !important; Les deux ont travaillé pour moi.
Puisque nous ne pouvons pas forcer l'utilisateur à faire la configuration, je suggérerais une deuxième option, mais c'est un processus long.Si vous avez un moyen plus court, dites-nous.
La réponse la plus pertinente
La ligne noire pourrait-elle être une bordure, un contour, une ombre, etc.? Vous pouvez essayer de définir chacun de ces paramètres sur
nonepour le bouton et voir si la ligne disparaît.Salut @Run_Script oui je peux le remplacer facilement, mais je dois le faire à chaque fois que je crée un nouveau site Web / projet. c'est comme ajouter une déclaration supplémentaire lors de la réinitialisation de la marge par défaut du navigateur et du remplissage du sélecteur universel. Existe-t-il une méthode pour modifier le CSS de Google Chrome?
Cela a totalement détruit mon application et a l'air horrible. Mais je suppose que c'est remplaçable mais pour tous les clients qui ne veulent pas mettre à niveau, c'est nul :(
@JGoodgive Je pense que Chrome devrait annuler cette mise à jour visuelle pour la mise au point / l'état actif sur les éléments, j'ai remarqué qu'il y a également d'autres changements dans l'apparence, comme le changement de style du calendrier de sélection de date par défaut, une nouvelle conception de case à cocher, une case à cocher attrayante pour les règles de style dans l'inspecteur devtool
Cela a été là récemment uniquement sur Chrome et Linux. Le chrome a toujours l'air bien, mais le chrome a cependant un problème de couleur. Le site Web qui avait l'air bien un mois auparavant, il a maintenant des bordures noires!
Le style de mise au point est en fait un double contour noir et blanc afin qu'il soit visible sur n'importe quel arrière-plan. C'est en grande partie pour l'accessibilité car leur contour flou bleu précédent était inaccessible. Cette version actuelle est très accessible - blog.chromium.org/2020/03 / ...
oui c'est très accessible, mais il devrait être présenté comme une fonctionnalité supplémentaire. pas par défaut activé feauture