Что такое -webkit-focus-ring-color?

Я хочу воспроизвести эффект outline для целенаправленных полей ввода в webkit для браузеров, отличных от webkit. Я нашел здесь CSS по умолчанию, используемый в webkit. Интересующие линии:

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

Я попытался сделать поиск во всем коде для определения -webkit-focus-ring-color здесь, но не смог найти его где-либо.

Ответ 1

-webkit-focus-ring-color определяется в базе данных WebKit как focusRingColor в каждом классе RenderTheme. Эта работа была выполнена в июне 2009 года в рамках этого набора изменений Джереми Московичем.

Например, тема Mac по умолчанию (используемая Safari) определяет цвет в RenderThemeMac.mm (круговым способом) как:

[NSColor keyboardFocusIndicatorColor]

(Apple очень легкая документация на это свойство доступна в Интернете).

Существует значение переопределения для Mac (называемое WebCore::oldAquaFocusRingColor), которое будет использоваться для тестирования (почти так же, как я могу сказать, чтобы код мог выполнять сравнение между рендерингом браузера и ссылочной графикой, он переключается используя WebCore::usesTestModeFocusRingColor). Он определен в ColorMac.mm как следующий (который, по-видимому, отображается на Color(125, 173, 217)):

0xFF7DADD9

Chromium/Chrome определяет цвет в RenderThemeChromiumSkia.cpp как:

Color(229, 151, 0, 255)

Цвет по умолчанию (указанный в RenderTheme.h) является чисто черным:

Color(0, 0, 0)

Ответ 2

Используйте jsFiddle. Я получил rgb(229, 151, 0) в Chrome 14 на Windows 7.

Ответ 3

-webkit-focus-ring-color не работает в Firefox. Вы можете использовать цвет системы Highlight в качестве замены, хотя.

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

Также см. этот сайт о том, почему сброс стилей outline обычно является плохой идеей.

Ответ 4

FWIW: Используя Chrome на Mac, я получаю синий цвет контура при использовании обычного режима браузера. Когда я использую представление устройства, я получаю желтый/золотой цвет.

Не уверен, почему это изменилось - на самом деле было очень запутанным. См. Примеры ниже.