Изменить желтый бэкграунд у input при автозаполнении. Возможно ли?

Question

Реально ли изменить стили стандартного автокомплита браузера?
Речь идет вот об этом:

Сначала задался вопросом, а как вообще убрать этот фон? И нашел весьма хитрое решение:
Например есть какой-то инпут и ему прописываем в css

input:-webkit-autofill {
        transition: all 5000s ease-in-out;
    }

Типо ставим очень длительную задержку, например 5000 секунд как здесь, и забываем об этом желтом фоне. Это единственное решение, которое я нашел, которое работает.
Либо задаем <input autocomplete="off"> и вовсе избавляемся от автокомплита.

Но отсюда появился еще один интересный вопрос. А возможно ли вообще управлять этим свойством?

Например при автокомплите поставить автозаполнение синим цветом, или зеленым, или вообще картинку какую-нибудь поставить.
Обычные попытки по типу

input:-webkit-autofill {
    background: blue;
    color: blue;
}

К сожалению не заканчиваются успехом(
И как же все-таки быть?

Answer 1

Вы можете использовать псевдоселектор -webkit-autofill, чтобы настроить таргетинг на эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяется большинство других свойств, таких как граница и размер шрифта. Мы даже можем изменить цвет текста с помощью -webkit-text-fill-color, который включен в фрагмент ниже:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

body {
  background: #333;
  color: #fff;
  display: flex;
  font-family: "Lato";
  font-size: 2em;
  justify-content: center;
}

form {
  padding: 50px 0;
  width: 50%;
}

<form>
  <div class="form-group">
    <label for="exampleInputFirst">First Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputFirst">
  </div>
  <div class="form-group">
    <label for="exampleInputLast">Last Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputLast">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email Address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail">
  </div>
 
  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

Так же, вы можете отключить совсем его: <input name="q" type="text" autocomplete="off"/>

БЛОГ НА HUSL

Изменить желтый бэкграунд у input при автозаполнении. Возможно ли?

Ответы (1 шт):