Восстановить CSS контур Webkit в поле ввода

Question

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

На странице, с которой я работаю, есть outline: none применяется ко всем элементам, и я просто хочу вернуться к настройке по умолчанию на нескольких. Есть идеи?

Answer 1

Вместо сброса с контуром: нет, сбросьте с контурной шириной: 0. Это предотвращает очистку стилей браузером, и при повторном применении ширины стиль все равно будет там.

input:focus {
  outline-width: 0;
}

input.nostyle:focus {
  outline-width: 5px;
}

http://jsfiddle.net/VT4Hb/

Answer 2

Ответ на ваш актуальный вопрос ( прямо из стандартного набора WebKit) html.css стили) это:

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

Значение -webkit-focus-ring-color определяется для каждой платформы отдельно (если вы супер увлечены, вы можете найти WebCore::systemFocusRingColor). На практике значения варьируются в зависимости от платформы.

В Safari v6 и Chrome v20 на OS X Lion фактическое значение:

outline: rgb(94, 158, 215) auto 5px;

… И в Chrome v20 для Windows и Chromium v18 для Linux я получил следующее значение:

outline: rgb(229, 151, 0) auto 5px;

Как описано в этом великолепном ответе Stackru, вы можете запустить этот jsFiddle, чтобы рассчитать цвет контура на вашем собственном компьютере.

Answer 3

Используйте класс на полях, которые вы хотите без контура.

.nool { outline: none; }