Переопределить стиль сохраненного поля пароля в 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;
}
это сработало для меня.