Почему контур этого текстового ввода в Chrome отличается от Firefox? - PullRequest
Новая
       14

Почему контур этого текстового ввода в Chrome отличается от Firefox?

2 голосов
/ 30 декабря 2011

Я написал эту скрипку, чтобы продемонстрировать проблему.У меня есть простая форма.Когда текстовое поле получает фокус, все, что я хочу, - это изменить фон текстового поля.В Firefox 9 это работает нормально.В Chrome кажется, что он неправильно изменяет схему ввода.Даже если я это явно установлю.Chrome меняет его и помещает черный контур вокруг ввода в фокусе.

Вот JS Fiddle: http://jsfiddle.net/H3qay/

Любая помощь будет оценена.

1 Ответ

6 голосов
/ 30 декабря 2011

По-видимому, WebKit (используемый Safari и Chrome) применяет отрицательное значение outline-offset к сфокусированным вводам формы.Вы можете увидеть это в следующем CSS-правиле для целевых входов формы в Таблице стилей WebKit по умолчанию : 

input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
    outline-offset: -2px
}

Так что отменить это просто вопрос установки 0: 

input:focus
{
    background: rgba(0,0,0,.3);
    outline-offset: 0;
}

Обновленная демоверсия jsFiddle

...