Google Chrome > zones de texte > bordure Jaune lorsqu'il est actif..?

Ceci est causé par une contour, pas une frontière. Le style spécifique que vous voyez est défini dans l'agent utilisateur (navigateur) de la feuille de style.

Je suis d'accord que google Chrome est grand, a souligné le contour est de mauvaise qualité, dans de nombreux cas, bien qu'il ne le rendre évident le champ n'est actif.

---

Au début de 2014, le point culminant est maintenant bleu (au lieu de jaune) et de les mettre en évidence l'effet est plus petit. Les instructions suivantes sont valables pour la modification de ce style.

---

Enlever le Contour

Vous pouvez définir outline: none; sur n'importe quel élément à supprimer le surlignage complètement.

input[type="text"], input[type="password"] { outline: none; }

Cela peut être (probablement) réduit l'accessibilité/facilité d'utilisation. Il en est de même un site web dédié sur les dangers de l'éliminer complètement le contour.

Style le Contour

Une meilleure alternative est de style le contour de sorte qu'il est 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 De L'Utilisateur

À la fois, de la feuille de style des auteurs souhaitez peut-être créer des contours autour de
visuelle des objets tels que des boutons, des champs de formulaire actifs, les cartes-images, etc.,
pour les faire ressortir.

En théorie, le contour peut être utilisé à des fins esthétiques, bien que je n'ai jamais trouvé une autre utilisation pratique que d'indiquer le focus. Cependant, il est préférable d'afficher uniquement l'accent-comme le contour lorsqu'un élément est en fait concentré. En d'autres termes, ne pas en faire un élément regard porté quand il ne l'est pas.

Rappelez-vous que les ancres HTML peut également recevoir le focus et que leur cadre peut également être de style. Cela peut être utile de repère pour l'utilisateur.

Rendu Visuel

Le contour créé avec le contour des propriétés est dessiné "plus" de la boîte,
c'est à dire, le contour est toujours sur le dessus, et n'influence pas la
la position ou la taille de la boîte, ou de toutes les autres cases. Par conséquent,
l'affichage ou la suppression des contours ne cause pas de redistribution ou de débordement.

Un contour peut être appliquée à n'importe quel élément (encore une fois, assurez-vous de ne pas confondre l'utilisateur).

Contrairement aux frontières, ils ne sont pas d'incidence sur la position ou la taille de la boîte. Ceci est important, par exemple, en montrant que l'ancre a priorité; si vous avez ajouté une bordure à l'ancre, l'ensemble de la zone de déplacement visible par la taille de la bordure (l'essayer). Par comparaison, un contour ne pas déplacer la zone.

Un inconvénient de cette zone de l'indépendance, c'est que le contour ne permet pas toujours de rendre précisément là où vous les attendez. Remplacé éléments peut rendre dans les moyens (maintenant ou dans l'avenir), qui ne pourraient pas l'air bien avec un point fort particulier de style. <input type="range"> est un bon candidat pour voir ce comportement.

_{Ce plan est fonctionnel, mais pas très jolie ou encore aligné correctement Chrome 26-29).}

---

Bouton éléments ne sont pas actuellement (Chrome 21) l'air correct avec un contour spécifié (essayez-le et voyez - le contour de ne pas suivre le bord de la touche).

_{Contours semblent maintenant être correctement alignés avec les bords de touche de Chrome 26.}