From 92ea40fc6cd38da23375646b4370008e7998c9e9 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Thu, 28 Nov 2024 16:42:42 +0200 Subject: [PATCH] [GEN-1824]: fix styles for autocompleted inputs (#1885) This pull request includes changes to the `frontend/webapp/app/globals.css` file to address browser autofill styling issues. The most important changes include overriding the default browser styles for autofill to ensure a consistent user experience. Styling improvements: * [`frontend/webapp/app/globals.css`](diffhunk://#diff-0ad5feab59ca691369930750cde64b75419ddd0dbe0e567e069550de11c4b051R10-R26): Added styles to override the browser `:-webkit-autofill` default style declarations by delaying the browser styles for 50000s (13.8 hours), ensuring that the user will not see the browser-applied styles. --- frontend/webapp/app/globals.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css index a7d610642..302fd6694 100644 --- a/frontend/webapp/app/globals.css +++ b/frontend/webapp/app/globals.css @@ -6,4 +6,21 @@ * { scrollbar-color: black transparent; scrollbar-width: thin; -} \ No newline at end of file +} + +/* + The input styles below are to override the browser ":-webkit-autofill" default style declarations. + The issue is when someone autocompletes an input field, the browser will apply its own styles (and the browser applies "!important" preventing direct overrides). + With the following, we're able to delay the browser styles to be applied for 50000s (13.8 hours), so the user will not see the browser styles applied. +*/ + +input { + all: unset; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + transition: all 50000s ease-in-out 0s; +}