Skip to content

Commit

Permalink
Merge pull request #32332 from tienifr/fix/31415
Browse files Browse the repository at this point in the history
fix: 31415 Input field on Login page gets white background after using auto-fill
  • Loading branch information
neil-marcellini authored Dec 5, 2023
2 parents 3915fb2 + 700cded commit a42894e
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion web/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,17 @@
}

/* Customizes the background and text colors for autofill inputs in Chrome */
/* Chrome on iOS does not support the autofill pseudo class because it is a non-standard webkit feature.
We should rely on the chrome-autofilled property being added to the input when users use auto-fill */
input[chrome-autofilled],
input[chrome-autofilled]:hover,
input[chrome-autofilled]:focus,
textarea[chrome-autofilled],
textarea[chrome-autofilled]:hover,
textarea[chrome-autofilled]:focus,
select[chrome-autofilled],
select[chrome-autofilled]:hover,
select[chrome-autofilled]:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
Expand All @@ -86,7 +97,7 @@
}

/* Prevent autofill from overlapping with the input label in Chrome */
div:has(input:-webkit-autofill) > label {
div:has(input:-webkit-autofill, input[chrome-autofilled]) > label {
transform: translateY(var(--active-label-translate-y)) scale(var(--active-label-scale)) !important;
transition: transform var(--label-transition-duration);
}
Expand Down

0 comments on commit a42894e

Please sign in to comment.