Переопределить стиль сохраненного поля пароля в Google Chrome

Я разрабатываю веб-приложение, а общий стиль включает белый текст на темном фоне.

Этот стиль включает использование пользовательского (темного) изображения для полей имени пользователя и пароля с белым текстом.

Если пользователи регистрируются с помощью Google Chrome и выбирают сохранить их данные для входа в форму, при следующем посещении поля имени пользователя и пароля выглядят бледно-желтыми с белым текстом, что делает его почти невозможным для чтения. Это выглядит очень плохо.

Как бы я решил переопределить этот стиль, не позволяя google chrome изменять фон сохраненных полей имени пользователя и пароля.

<style type="text/css">
  input {
    border: none;
    background: url('darkinput.png');
    color: #fff;
  }
</style>

<input type="text" name="email" id="text" /> 
<input type="password" name="password" id="text" />

EDIT: В настоящее время (google-chrome v11.0.696.57) таблицы стилей пользовательского агента содержат важные переопределения для установки обоих следующих параметров:

input:-webkit-autofill{
  background-color: rgb(250, 255, 189) !important;
  background-image: none !important;
}

Ниже приведен отчет об ошибке по указанному ниже адресу, и я призываю всех, кто читает это, проголосовать:

http://code.google.com/p/chromium/issues/detail?id=46543

Ответ 1

Чтобы полностью отключить автоматическое завершение (и, следовательно, удалить проблему стиля), вы можете попробовать следующее:

<form autocomplete="off">
...
</form>

Однако другой возможностью было бы использовать jquery для удаления стиля после загрузки страницы.

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

Ответ 2

Просто установка тени исправит это:

input:-webkit-autofill { 
  -webkit-box-shadow:200px 200px 100px white inset; 
  box-shadow:200px 200px 100px white inset; 
}

Ответ 3

Пожалуйста, переопределите значение css по умолчанию, которое

input:-webkit-autofill {
  background-color: #FAFFBD !important;
  background-image:none !important;
  color: #000000 !important;
}

Ответ 4

В reset стили:

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

это сработало для меня.