Fix: filled inputs looked bizarre with autofill. (#644)

* Update input.styles.ts * Update input.styles.ts
shoelace-style · Jan 11, 2022 · 9eb76fe · 9eb76fe
1 parent 6d766a8
commit 9eb76fe
Showing 1 changed file with 8 additions and 0 deletions.
diff --git 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 {