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

Question

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

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

Answer 1

Ответ на ваш фактический вопрос ( прямо из стандартного набора WebKit html.css styles ) таков:

: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;

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

Answer 2

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

input:focus {
  outline-width: 0;
}

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

http://jsfiddle.net/VT4Hb/

Answer 3

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

.nool { outline: none; }