css - tipos - ¿Qué es-webkit-focus-ring-color?

principales etiquetas de html

Question

Quiero reproducir el efecto de outline para cuadros de entrada enfocados en webkit a navegadores que no sean webkit. Encontré here el CSS predeterminado utilizado en webkit. Las líneas de interés son:

:focus {
    outline: auto 5px -webkit-focus-ring-color
}

Intenté hacer una búsqueda en todo el código para la definición -webkit-focus-ring-color here pero no pude encontrarla en ningún lado.

Answer 1

FWIW: Usando Chrome en una Mac, obtengo un color de contorno azul cuando uso el modo de navegador normal. Cuando uso la vista del dispositivo, obtengo un color de contorno amarillo / dorado.

No estoy seguro de por qué cambia, en realidad fue muy confuso. Ver ejemplos a continuación.

Answer 2

Usa este jsFiddle . rgb(229, 151, 0) en Chrome 14 en Windows 7.

Answer 3

-webkit-focus-ring-color no funciona en Firefox. Sin embargo, puede utilizar el Highlight color del sistema como reemplazo.

:focus {
    outline: auto 2px Highlight;
    outline: auto 5px -webkit-focus-ring-color;
}

También vea this sitio sobre por qué restablecer los estilos de outline es generalmente una mala idea.

Answer 4

-webkit-focus-ring-color se define en la base de código de WebKit como focusRingColor en cada clase RenderTheme . Ese trabajo fue realizado en junio de 2009 como parte de este conjunto de cambios por Jeremy Moskovich .

Por ejemplo, el tema predeterminado de Mac (utilizado por Safari) define el color en RenderThemeMac.mm (de forma indirecta) como:

[NSColor keyboardFocusIndicatorColor]

( La documentación muy ligera de Apple de esa propiedad está disponible en línea ).

Hay un valor de anulación para Mac (llamado WebCore::oldAquaFocusRingColor ) que se utilizará para la prueba (cerca de lo que puedo decir es que el código puede realizar una comparación entre la representación del navegador y un gráfico de referencia; se alterna mediante WebCore::usesTestModeFocusRingColor ). Se define en ColorMac.mm como el siguiente (que aparentemente se asigna a Color(125, 173, 217) ):

0xFF7DADD9

Chromium / Chrome define el color en RenderThemeChromiumSkia.cpp como:

Color(229, 151, 0, 255)

El color predeterminado (especificado en RenderTheme.h ) es negro puro:

Color(0, 0, 0)