Qu'est -webkit-focus-anneau de couleur?
Je veux reproduire l'effet outline pour les boîtes de saisie focalisées dans webkit aux navigateurs non-webkit. J'ai trouvé ici Le CSS par défaut utilisé dans webkit. Les lignes d'intérêt sont:
:focus {
outline: auto 5px -webkit-focus-ring-color
}
J'ai essayé de faire une recherche dans l'ensemble du code pour la définition -webkit-focus-ring-color ici, mais ne pouvait pas le trouver n'importe où.
4 réponses
-webkit-focus-ring-color est défini dans la base de code WebKit comme focusRingColor dans chaque classe RenderTheme. Ce travail a été effectué en juin 2009 dans le cadre de ce changeset par Jeremy Moskovich .
Par exemple, le thème Mac par défaut (utilisé par Safari) définit la couleur dans RenderThemeMac.mm (d'une manière détournée) comme:
[NSColor keyboardFocusIndicatorColor]
(la documentation Très légère D'Apple de cette propriété est disponible en ligne).
Il existe une valeur de remplacement pour le Mac (appelée WebCore::oldAquaFocusRingColor) à utiliser pour test (comme je peux le dire, c'est pour que le code puisse effectuer une comparaison entre le rendu du navigateur et un graphique de référence; il est basculé en utilisant WebCore::usesTestModeFocusRingColor). Il est défini dans ColorMac.mm comme suit (qui correspond apparemment à Color(125, 173, 217)):
0xFF7DADD9
Chrome/Chrome définit la couleur dans RenderThemeChromiumSkia.cpp comme:
Color(229, 151, 0, 255)
La couleur par défaut (spécifié dans RenderTheme.h) est noir pur:
Color(0, 0, 0)
Utilisez ce jsFiddle . J'ai rgb(229, 151, 0) dans Chrome 14 sur Windows 7.
-webkit-focus-ring-color ne fonctionne pas dans Firefox. Vous pouvez cependant utiliser la couleur système Highlight en remplacement.
:focus {
outline: auto 2px Highlight;
outline: auto 5px -webkit-focus-ring-color;
}
Voir Aussi ce site sur pourquoi Réinitialiser les styles outline est généralement une mauvaise idée.
FWIW: En utilisant Chrome sur un Mac, je reçois une couleur de contour bleu lors de l'utilisation du mode navigateur normal. Lorsque j'utilise la vue de l'appareil, j'obtiens une couleur de contour jaune/or.
Je ne sais pas pourquoi cela change-était en fait très déroutant. Voir les exemples ci-dessous.
