From 9eb76fe470db0c51d32d43ae1b7f2f47d9f631ad Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 11 Jan 2022 09:35:28 -0500 Subject: [PATCH] Fix: `filled` inputs looked bizarre with autofill. (#644) * Update input.styles.ts * Update input.styles.ts --- src/components/input/input.styles.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 05fc11c58..4729f33bd 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -115,6 +115,14 @@ export default css` .input__control:-webkit-autofill:active { box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important; -webkit-text-fill-color: var(--sl-color-primary-500); + caret-color: var(--sl-input-color); + } + + .input--filled .input__control:-webkit-autofill, + .input--filled .input__control:-webkit-autofill:hover, + .input--filled .input__control:-webkit-autofill:focus, + .input--filled .input__control:-webkit-autofill:active { + box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important; } .input__control::placeholder {