Чем можно победить input:-webkit-autofill?

#html #css

Дефолтный стиль хрома не позволяет изменить бэкграунд автоматически заполненного
поля. В чем кроется сия загвоздка, может кто знает?    

Ответы

Ответ 1

Переопределить у тебя ее не получится, т.к. эта штука вшита. Я использовал такой CSS-хак:

.some_input{
    -webkit-box-shadow: inset 0 0 0 50px #fff;
    -webkit-text-fill-color: #000;
}


т.е. перекрываем бэкграунд внутренней тенью.


Ответ 2

Нужен был прозрачный фон или градиент. Сделал вот так и фон стал прозрачным. Если
убрать строку с градиентом - возвращается желтый фон, но если ее оставить, то можно
задать любой цвет в строке где transparent у меня.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #ссс;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,174,255,0.04)
50%,rgba(255,255,255,0) 51%,rgba(0,174,255,0.03) 100%);  
}


Ответ 3

Пишут, что лечится так:

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

function loadPage() // Вызывается на onload
{
    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)
    }
}


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

Или отключить автозаполнение (autocomplete="off").


Ответ 4

Можно выключить для всей формы:




или для конкретного поля:




Это сработает, но автозаполнение перестанет работать полностью.

Другим вариантом является задание большой внутренней тени для полей с цветом равным
цвету желаемого фона:

input {outline: none;}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important; /* Цвет фона */
}


Ответ 5

Не плохой костыль :)

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}


Ответ 6

Вот работающий метод - во всех современных браузерах (opera, chrome, edge, firefox)
Добавьте такие стили css



@-webkit-keyframes autofill {
  to {
    color: inherit;
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}




Это перекроет цвета которыми браузер заполняет поля ввода


Ответ 7




У меня работает