From 97d189f1c8f9033707c48599df11ccdda2e560d6 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 31 Oct 2023 23:30:35 +0800 Subject: [PATCH] fix(component): adjust autofill style (#4773) --- packages/frontend/component/src/ui/input/style.css.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/frontend/component/src/ui/input/style.css.ts b/packages/frontend/component/src/ui/input/style.css.ts index e5613ccb7..1a28265a0 100644 --- a/packages/frontend/component/src/ui/input/style.css.ts +++ b/packages/frontend/component/src/ui/input/style.css.ts @@ -74,6 +74,14 @@ export const input = style({ '&::placeholder': { color: 'var(--affine-placeholder-color)', }, + '&:autofill, &:-webkit-autofill, &:-internal-autofill-selected, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active': + { + // The reason for using ‘!important’ here is: + // The user agent style sheets of many browsers utilise !important in their :-webkit-autofill style declarations. + // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#:~:text=%2C%20254)-,!important,-%3B%0Abackground%2Dimage + backgroundColor: 'var(--affine-white-10) !important', + ['-webkit-box-shadow' as string]: 'none !important', + }, '&:disabled': { color: 'var(--affine-text-disable-color)', },