Autofill clear background trick stopped working? - html

Question

I had this piece of CSS implemented to have a transparent autofill background. But something has recently changed that it stopped working?
#-webkit-keyframes autofill {
to {
color: white;
background: transparent;
}
}
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
Is there a fix to this?
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

Just this would do the job perfectly :
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>
Source

Answer 2

https://jsbin.com/zofuqunavo/
#keyframes autofill {
to {
color: white;
background: green;
}
}
input:focus {
animation-name: autofill;
animation-fill-mode: both;
}
Using input:focus selector instead of input:autofill seem fix your issue.
Autofill is a bit unstable feature, the behaviour is changed multiple times and each browser has own implementation.