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

Question

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

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

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

Answer 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

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

Color(229, 151, 0, 255)

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

Color(0, 0, 0)

Answer 2

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

Answer 3

Редактировать : Как отмечает @chharvey, Highlight теперь является устаревшим системным цветом, , поэтому игнорируйте этот ответ.

---

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

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

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

Answer 4

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

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