Отключение стилей автозаполнения

#css #css3

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





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

input:-webkit-autofill {
    background-color: transparent !important;
}

    

Ответы

Ответ 1

Вот что говорит 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?


Ответ 2

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

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


или же 

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


html




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


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