4

При авто-заполнении инпутов, Chrome выставляет следующие стили для авто-заполненных полей. Как эти стили перекрыть или отключить? Именно стили, а не само по себе автозаполение.

стили автозаполнения

user-agent стили Google Chrome

И следующий код не отключает стили автозаполнения:

input:-webkit-autofill {
    background-color: transparent !important;
}
1
  • Вы не должны этого хотеть
    – Alexey Ten
    18 мая 2016 в 4:26

2 ответа 2

4

Вот что говорит MDN про :-webkit-autofill:

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.


Cтили, добавляемые многими браузерами через user agent, содержат !important в объявлении свойства :-webkit-autofill , запрещая его перезапись без вмешательства хаков Javascript

Можно выкрутиться, применив хитрости:


1) в случае, если фон input должен быть какого-либо цвета, но не прозрачный:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* можно изменить на любой вариант цвета */
    -webkit-text-fill-color: #333;
}

в этом случае мы заливаем содержимое input применением внутренней тени желаемого цвета поверх цвета фона, устанавливаемого user agent stylesheet в Chrome


2) можно установить задержку на анимацию "пожелтения" фона на большой промежуток времени, тем самым давая возможность пользователю ввести свои данные и не увидеть желтый фон достаточно долго:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s; /* выставляется желаемая задержка */
}

Подсмотрено на SO.com: Removing input background colour for Chrome autocomplete?

1
  • Первый вариант не сработал. Второй сработал. Спасибо. 18 мая 2016 в 11:46
0

Здравствуйте! Попробуйте через скрипт

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

или же

input:focus {
    background-position: 0 0;
}

html

<body onload="loadPage();">

js

 function loadPage()
    {
        if (document.login)//if the form login exists, focus:
        {
            document.login.name.focus();//the username input
            document.login.pass.focus();//the password input
            document.login.login.focus();//the login button (submitbutton)
        }
    }

Вот ссылка на источник - Ответ

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.