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

Question

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

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

Если пользователи входят в систему с помощью 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" />

РЕДАКТИРОВАТЬ: В настоящее время (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

Answer 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);
    });
});}

Answer 2

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

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

Answer 3

Чтобы сбросить стили:

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

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

Answer 4

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

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