Трюк с автозаполнением и очисткой фона перестал работать?

Question

Я реализовал этот кусок CSS, чтобы иметь прозрачный фон автозаполнения. Но что-то недавно изменилось, что перестало работать?

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

    }
}

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

Есть ли что-то исправить?

  form {
  background-color: red;
}

div {
  margin: 15px 0;
  position: relative;
  width: 360px;
  color: red;
  background-color: red;
}

textarea,
select,
input {
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  border: 1px solid #000;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  color: red;
  background-color: red;
}

textarea {
  height: 200px;
  color: red;
  background-color: red;
}

textarea+label {
  width: calc(100% - 2px) !important;
  top: 1px;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  text-align: center;
  color: red;
}

textarea:invalid,
select:invalid,
input:invalid {
  box-shadow: none;
  color: red;
}

textarea:invalid+label,
select:invalid+label,
input:invalid+label {
  padding: 0 10px;
  max-width: 360px;
  color: red;
}

textarea:focus+label,
select:focus+label,
input:focus+label,
label {
  position: absolute;
  background: #a4a290;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  left: 1px;
  top: 1px;
  height: 28px;
  font: 14px/28px sans-serif;
  -webkit-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  color: red;
  border-radius: 5px 0 0 5px;
}

textarea:focus+label {
  height: 0;
  color: red;
  @-webkit-keyframes autofill {
    to {
      color: white;
      background: transparent;
    }
  }
  input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
  }

<form>
  <div>
    <input type="text" id="firstname" required/>
    <label for="firstname">First Name</label>
  </div>
  <div>
    <input type="text" id="secondname" required/>
    <label for="secondname">Second Name</label>
  </div>
  <div>
    <select id="type" required>
      <option value=""></option>
      <option value="1">Type 1</option>
      <option value="2">Type 2</option>
      <option value="3">Type 3</option>
      <option value="4">Type 4</option>
    </select>
    <label for="type">Select type...</label>
  </div>
  <div>
    <textarea id="comment" required/></textarea>
    <label for="comment">Comment</label>
  </div>
</form>

Answer 1

Просто это отлично сработает:

input:-webkit-autofill {
  -webkit-text-fill-color: transparent;
  transition: background-color 5000s ease-in-out 0s;
}

form {
  background-color: red;
}

div {
  margin: 15px 0;
  position: relative;
  width: 360px;
  color: red;
  background-color: red;
}

textarea,
select,
input {
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  border: 1px solid #000;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  color: red;
  background-color: red;
}

textarea {
  height: 200px;
  color: red;
  background-color: red;
}

textarea+label {
  width: calc(100% - 2px) !important;
  top: 1px;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  text-align: center;
  color: red;
}

textarea:invalid,
select:invalid,
input:invalid {
  box-shadow: none;
  color: red;
}

textarea:invalid+label,
select:invalid+label,
input:invalid+label {
  padding: 0 10px;
  max-width: 360px;
  color: red;
}

textarea:focus+label,
select:focus+label,
input:focus+label,
label {
  position: absolute;
  background: #a4a290;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  left: 1px;
  top: 1px;
  height: 28px;
  font: 14px/28px sans-serif;
  -webkit-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  color: red;
  border-radius: 5px 0 0 5px;
}

textarea:focus+label {
  height: 0;
  color: red;
}

input:-webkit-autofill {
  -webkit-text-fill-color: black;
  transition: background-color 5000s ease-in-out 0s;
}

<form>
  <div>
    <input type="text" id="firstname" required />
    <label for="firstname">First Name</label>
  </div>
  <div>
    <input type="email" id="email" required />
    <label for="email">Email</label>
  </div>
  <div>
    <input type="text" id="secondname" required />
    <label for="secondname">Second Name</label>
  </div>
  <div>
    <select id="type" required>
      <option value=""></option>
      <option value="1">Type 1</option>
      <option value="2">Type 2</option>
      <option value="3">Type 3</option>
      <option value="4">Type 4</option>
    </select>
    <label for="type">Select type...</label>
  </div>
  <div>
    <textarea id="comment" required /></textarea>
    <label for="comment">Comment</label>
  </div>
</form>

^{Источник}

Answer 2

https://jsbin.com/zofuqunavo/

@keyframes autofill {
    to {
        color: white;
        background: green;
    }
}

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

Использование селектора input:focus вместо input:autofill, похоже, решит вашу проблему.

Автозаполнение - это немного нестабильная функция, поведение меняется несколько раз, и каждый браузер имеет собственную реализацию.