Cela est dû à une aperçu et non une frontière. Le style spécifique que vous voyez est défini dans la feuille de style de l'agent utilisateur (navigateur).
Je suis d'accord pour dire que le grand contour en surbrillance de Chrome n'est pas très esthétique dans de nombreux cas, bien qu'il permette de savoir quel champ est actif.
Depuis 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 de l'ébauche
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é/la facilité d'utilisation. Il existe même un site web dédié aux dangers de supprimer complètement le contour.
Stylisation de l'ébauche
Une meilleure solution consiste à donner un style au contour de manière à ce qu'il soit toujours visible, mais moins gênant. Voir https://developer.mozilla.org/en-US/docs/CSS/outline
Démonstration : 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 des objets visuels tels que des boutons, des champs de formulaire actifs, des cartes d'images, etc, pour les faire ressortir.
En théorie, le contour peut être utilisé à des fins esthétiques, mais je n'ai jamais trouvé d'utilisation pratique autre que l'indication de la mise au point. 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, il ne faut pas donner l'impression qu'un élément est focalisé alors qu'il ne l'est pas.
N'oubliez pas que les ancres HTML peuvent également recevoir le focus et que leur contour peut également être stylé. Cela peut constituer un indice 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 reflux ou de débordement.
Un contour peut être appliqué à n'importe quel élément (là encore, veillez à ne pas créer de confusion pour l'utilisateur).
Contrairement aux bordures, elles n'ont pas d'incidence sur la position ou la taille de la boîte. C'est important, par exemple, lorsqu'il s'agit de montrer qu'une ancre a le focus ; si vous ajoutez une bordure à l'ancre, la boîte entière se déplacerait visiblement de la taille de la bordure ( essayez-le ). En comparaison, un contour ne déplacera pas la boîte.
L'un des inconvénients de cette indépendance vis-à-vis de la boîte est que le contour n'est pas toujours rendu précisément là où on l'attend. Éléments remplacés peuvent être rendus d'une manière (actuelle ou future) qui pourrait ne pas convenir à un style de mise en valeur particulier. <input type="range"> est un bon candidat pour observer ce comportement.
![enter image description here]()
Ce contour est fonctionnel, mais pas très joli ni même aligné correctement (Chrome 26-29).
Actuellement (Chrome 21), les éléments de bouton n'ont pas un aspect correct lorsqu'un contour est spécifié (essayez et voyez - le contour ne suit pas le bord du bouton).
Les contours sont désormais correctement alignés sur les bords d'un bouton à partir de Chrome 26.
