Google Chrome> Zones de texte> Bordure jaune lorsqu'elle est active ..?
J'ai modifié un formulaire aujourd'hui et je l'ai testé dans Chrome. J'ai remarqué qu'en sélectionnant une zone de texte, avec une bordure: 0 ou aucune, cela met toujours une bordure jaune autour d'elle. Quelqu'un connaît-il un moyen de se débarrasser de cette frontière? Je ne serais généralement pas dérangé, mais cela semble vraiment horrible avec le schéma de couleurs que j'utilise.
Merci d'avance.
Cordialement,
Richard
PS J'ai essayé d'utiliser! Important aussi, au cas où quelque chose d'autre réglerait la bordure en jaune dans le CSS.
Cela est dû à un contour , pas à une bordure. Le style spécifique que vous voyez est défini dans la feuille de style de l'agent utilisateur (navigateur).
Je suis d'accord que le grand contour en surbrillance de Chrome semble mauvais dans de nombreux cas, même si cela rend évident le champ actif.
Début 2014, la surbrillance est désormais bleue (au lieu de jaune) et l'effet de surbrillance est plus petit. Les instructions suivantes sont toujours valables pour modifier ce style.
Suppression du contour
Vous pouvez définir outline: none; sur n'importe quel élément pour supprimer complètement la surbrillance.
input[type="text"], input[type="password"] { outline: none; }
Cela réduit potentiellement (probablement) l'accessibilité/l'utilisabilité. Il y a même n site internet dédié aux dangers de supprimer complètement le contour.
Styliser le contour
Une meilleure alternative consiste à styliser le contour de sorte qu'il soit toujours visible mais moins désagréable. Voir https://developer.mozilla.org/en-US/docs/CSS/outline
Démo: http://jsfiddle.net/G28Gd/2/
INPUT[type="text"]:focus,
INPUT[type="number"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
INPUT[type="password"]:focus,
INPUT[type="range"]:focus
{
outline: 1px solid #0033dd;
}
Attentes des utilisateurs
Parfois, les auteurs de feuilles de style peuvent vouloir créer des contours autour d'objets visuels tels que des boutons, des champs de formulaire actifs, des images cliquables, etc., pour les faire ressortir.
En théorie, le contour peut être utilisé à des fins esthétiques, mais je n'ai jamais trouvé d'autre usage pratique que d'indiquer la concentration. Cependant, il est préférable de n'afficher un contour de type focus que lorsqu'un élément est réellement focalisé. En d'autres termes, ne donnez pas à un élément un aspect concentré lorsqu'il ne l'est pas.
N'oubliez pas que les ancres HTML peuvent également recevoir le focus et que leur contour peut également être stylisé. Cela peut être un signal utile pour l'utilisateur.
Rendu visuel
Le contour créé avec les propriétés du contour est dessiné "sur" une boîte, c'est-à-dire que le contour est toujours au-dessus et n'influence pas la position ou la taille de la boîte, ou de toute autre boîte. Par conséquent, l'affichage ou la suppression des contours ne provoque pas de refusion ou de débordement.
Un contour peut être appliqué à n'importe quel élément (encore une fois, assurez-vous de ne pas confondre l'utilisateur).
Contrairement aux bordures, elles n'ont pas d'impact sur la position ou la taille de la boîte. Ceci est important, par exemple, pour montrer qu'une ancre a le focus; si vous ajoutiez une bordure à l'ancre, la boîte entière se déplacerait visiblement de la taille de la bordure ( essayez-la ). Par comparaison, un contour ne décalera pas la case.
Un inconvénient de cette indépendance de la boîte est que le contour ne rend pas toujours exactement où vous vous attendez. Éléments remplacés peut être rendu de façon (actuelle ou future) qui pourrait ne pas être satisfaisante avec un style de surbrillance particulier. <input type="range"> est un bon candidat pour voir ce comportement.
Ce contour est fonctionnel, mais pas très joli ni même aligné correctement (Chrome 26-29).
Les éléments du bouton ne semblent pas actuellement (Chrome 21) corrects avec un contour spécifié (essayez-le et voyez - le contour ne suit pas le bord du bouton).
Les contours semblent désormais correctement alignés avec les bords d'un bouton à partir de Chrome 26.
C'est un outline, pas une bordure; Utilisez la propriété CSS de contour.